This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Cover images aren’t rescaling for mobile

Open 3 replies pluginplugin-page-builderquestion
Gail Palubiak
10 years ago · Last reply by Alex S 9 years ago

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

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

3
  1. Alex S Staff 10 years, 4 hours ago

    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.

  2. Gail Palubiak 10 years, 1 hour ago

    Thanks Alex. How do I use HTML images rather than a CSS background?

  3. Alex S Staff 9 years, 11 months ago

    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.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread