Background picture looks bad in mobile and tablet view

Hi @courtheye, I am happy to help you get your background styled as expected.

If you want to change the scaling and background settings for mobile and tablet devices then the best way to achieve this is by using custom CSS rules through your website’s Customizer.

Media queries are a CSS option that we can use to target only mobile and tablet screen sizes. The following code will create the media query and tell your website to only run the code contained within it at the appropriate screen sizes.

@media (max-width: 991px) {

}

Now that the Media Query is set up we can begin adding our rules to change the styling of the background image. Use the CSS selector body.custom-background to make sure your rules only apply to the element that controls your background image.

@media (max-width: 991px) {

body.custom-background {

}
}

Now you can begin adding your rules inside of the CSS selector. Use the background-size and background-position rules to make the desired changes.

@media (max-width: 991px) {
body.custom-background {
background-size: contain;
background-position: center;
}
}

The contain setting tells your background image to only stretch as far as the screen width will allow and the entire image should be visible.

If you want to replace the background image with a solid color you can use the following rules to remove the image and set a custom color for your background area. Replace the provided hexcode with any valid color hex you think will best fit your design.

@media (max-width: 991px) {
body.custom-background {
background-image: none;
background-color: #999999;
}
}

You can also use this rule to remove the margins and padding that applied by default to your Call to Action widget and decrease the size of that area.

@media (max-width: 991px) {
.palette-primary .call-to-action {
padding: 0;
margin: 0;
}
}

I hope that CSS lets you create the design you want and please let us know if there is anything else our team can do to help!

• This reply was modified 5 years, 3 months ago by Joseph W.
• This reply was modified 5 years, 3 months ago by Joseph W.

Thank you. I tried this and it did not work.

Sorry to hear the code isn’t working for you @courtheye. One reason you might not be seeing the changes immediately is your browser’s cache and you can try clearing that to see if the new CSS rules display correctly for you.

If that doesn’t fix the problem please let us know and we will figure out another solution for this.

Yes I have tried that still not working.

Hi @courtheye, there could be a number of things going on that are preventing those CSS rules from working correctly, and since the problem appears to be with the theme and not the Post and Page Builder, we will need to continue this contact through our usual theme support channel located at https://www.boldgrid.com/feedback/communities/20-questions.

Please post your question in that forum and our theme support team will do everything we can to help get that working for you.