Banners Not Staying Proportional

timpennington

I use banners on my site, including at the top of the page in the banner top position.

The banners are 728x90 (as the template banners were), but when looking at the banners on a phone, they seem scrunched and out of proportion (see screenshot).

I inspected the pages and it seems that on inside pages when viewed on a phone, the banners become 556x90 or 516x90 when I looked at the pages. (see attachments).

How can I make these banners remain proportional when viewed on a phone?

Thank you

dominic

Hi timpennington,
You can add the following CSS code to the ‎/templates/ja_focus/css/custom.css file:

@media (max-width: 767px) {
    .mod-banners__item.banneritem img {
         width: 100%;
         height: 100%;
    }
}

timpennington

Thanks, Dominic.

I made the changes (screenshot to check accuracy) and it doesn't seem to have helped. I added a screenshot after I refreshed my phone.

Not sure what to try next.

dominic

Hi timpennington,
I have updated the CSS code, you can check in the previous answer.

timpennington

Thanks, Dominic. I am not seeing the banners be proportional; they still seemed skewed.

dominic

Hi timpennington,
Your CSS that you using is error, I have updated the CSS Code here:

@media (max-width: 767px) {
    .mod-banners__item.banneritem img {
         width: 100%;
         height: 100%;
    }
}

timpennington

Thank you!