I’m using the Tesseract theme (www.tru-ally.com) and my cover photo and my “about” photos aren’t rescaling for mobiles. I’ve added the code I found by reading an earlier post with the same issue.
/* Page Builder Styles */
@media (min-width: 680px) {
.custom-home-hero .textwidget {
margin-top: 161px;
margin-bottom: 100px;
}
}
However, I don’t see any changes. Before I go too far here, I want to let you know that I’m a rookie at this so coding is very unclear to me.
Thanks in advance,
Gail
Hi Gail,
This is more due to how responsive backgrounds work in CSS more than anything. If you want a truly responsive image you’re going to have to use HTML images rather than a CSS background.
Regardless, you can sort of defuse the situation by using larger images overall. This way the browser is able to make more of the image responsive.
Thanks Alex. How do I use HTML images rather than a CSS background?
Hi Gail,
I would recommend the use of a image widget but, as your website displays, that might not really be possible due to how you’re using these images.
The best I can recommend for your situation would be to use larger images.