Resizing the Image in a Background Click Ad

Posted in: Newspaper
Post count: 36
strawberrybase
#452845
Sep 23, 2022 at 12:19 pm

Hi,

We have a background click ad on our site at the minute, http://www.tpimagazine.com,it’s all working as it should. But on smaller screens the it’s cutting off the right and left edges of the image.

Is there a way to make the image scale to 100% width? I tried to do it with custom CSS myself but it doesn’t seem to affect the size of the image at all.

Thanks.

Post count: 35449
Calin
#452879
Sep 23, 2022 at 5:36 pm

Hello,
The problem is that the image has 1920×1280 px so on smaller screens will not be resized, what I suggest is to use a custom css to replace the image with a spall one for smaller scenes.
Thank you!

Post count: 36
strawberrybase
#452883
Sep 23, 2022 at 6:18 pm

Thanks for the reply, that makes sense. Would you be able to help me out with the CSS for that? It’s not something I’ve ever attempted before.

Thanks again.

Post count: 35449
Calin
#452935
Sep 26, 2022 at 9:14 am

An example of css code for this is:
@media only screen and (max-width: 1600px) {
body {
background: url(http://your-website/newspaper/wp-content/uploads/2022/09/MAC-Aura-XIP-TPI-takeover-banner-2.jpg)!important;
}
}
This cod can be set in the theme panel > custom code. custom css, the http://your-website/newspaper/wp-content/uploads/2022/09/MAC-Aura-XIP-TPI-takeover-banner-2.jpg should be the second image that will have a smaller width (1600px)
I hope this will help you!

Viewing 4 posts - 1 through 4 (of 4 total)
You must be logged in to reply to this topic.