Hello Joy,

​Thank you for reaching out to our support team.

BoldGrid designs are built with a CSS framework called Bootstrap, which is a “mobile-first” framework. This means the framework itself was made specifically to prioritize mobile responsiveness.

I was looking over your site and all the images that displayed seams to work on mobile. However, if you are still working on the site and you are trying to update the images to be accepted on mobile you can create images for mobile specifically. Then in the edit page you can click the “Advanced Control” from the black button at the bottom of the container and only set visibility for desktop and phone.

Also, in Post & Page builder in the menu in the editor you can switch from the different phone, tablet, desktop and large displays.

Hope that helps, let us know if you have any further questions.
Elana.

Hello Joy,

​Thank you for reaching out to our support team.

I can’t see the images on your other pages because they are throwing 404 (not found) errors stating they are missing.

However, you could try first by setting the section width to 100% by clicking the “Section Width” on the container. Like Below:

If that doesn’t work you can add a Custom ID to the block with the background. In the below example that Jesse created, he shows how to create a custom CSS ID called my-custom-background as the custom ID.

Custom CSS to force it to scale down correctly:

#my-custom-background {
	background-size: contain !important; 
	background-repeat: no-repeat !important; }

Let me know if this helps or if you have any further questions.

Elana.

Hello Joy,

Thank you for reaching out to our support team!

I noticed that the images you referenced from the video aren’t directly related to mobile page speed. Additionally, I see that you’re using WP Fastest Cache rather than W3 Total Cache. Since we specialize in W3 Total Cache, I’m unable to provide specific guidance on the settings for WP Fastest Cache.

However, based on a quick review using Google PageSpeed Insights, you may want to look into enabling WebP conversion, eliminating render-blocking resources, and adjusting settings for minification and delayed asset loading to improve performance.

For a more detailed analysis, a full performance audit would be required, which can be purchased if you’re interested in switching to W3 Total Cache.

Let me know how you’d like to proceed!
Elana.

Hello Joy,

​Thank you for reaching out to our support team.

It looks like you have padding on your row that might be conflicting with the CSS that was added for the #my-custom-background CSS. If you can remove the Padding-Bottom: 300px from the row the image.

However, since some of these images are close to 1920px wide it would still be recommended to create mobile images and separate the images that way.

Thanks
Elana.

Hello Joy,

​Thank you for reaching out to our support team.

To answer your questions the code you put in there is fine. If you can see from the below image disabling that padding-bottom from the row causes the image to resize properly.

If you can remove that padding on the row in the page we can test further. The row has a padding on it and when its trying to shrink into the container it is trying to meet that padding requirement.

Thanks
Elana.