- Posts
Greetings,
I use blocks that have a background image that stays stationary, and text that scrolls up over the image. On a laptop or desktop, it all looks good, but on a mobile device, the background image isn’t “responsive” to adjust to the smaller screen. I’ve tried various CSS codes, but nothing seems to work. If there is a code, I need help in knowing where to place that code. Thanks.Hello Steve,
Thank you for reaching out to our support team.
It looks like adding the following CSS rule should help:
max-width: 100% !important;
Try placing this inside the
@media only screen and (max-width: 991px)section of your CSS. That should allow the content to scale properly on mobile devices.Let me know if that resolves the issue or if you need help applying it.
Thanks,
ElanaElana,
Thanks so much for this hopeful suggestion! Please help me know where to put this code. I am just a builder, not a “coder.” Do I start with the page on which the image is displayed, and go through the “Edit Section,” then “Advanced Control,” then “Custom CSS Classes,” or do I place this code somewhere else. I don’t understand what “@media only screen” means. Also, what do I do with the “(and max-width: 991px) section of your CSS” directions?
Sorry, I’m such a “novice.”
SteveHello Steve,
Thank you for reaching out to our support team.
It looks like there is some custom code in place, but based on what I’m seeing, it’s possible that Jetpack or a plugin called Boost Cache is adding some additional margin styling. I came across the following CSS on your site, which is likely affecting the layout on mobile:
@media only screen and (max-width: 991px) {#main-wrapper.full-width .main .entry-content .container .rowmargin-left: 0;
margin-right: 0;
}
}If you’re looking for a easier fix, I recommend editing the page and removing the 20px padding on both sides around the content blocks, as well as the -205px margin-right under the mobile layout settings. Removing that margin-right value alone significantly improves the mobile layout.
Additionally, I noticed that on some pages, such as your About Us page, there is Google script code placed directly within the page content. Just wanted to bring that to your attention in case it was unintentional.
Let me know if you’d like help applying any of these changes.
Thanks,
Elana
- The topic ‘Background image not responsive’ is closed to new replies.
