My Website Does Not Display Properly On Mobile Devices

Hi Lauren,
 
Thank you for your question and thanks for using BoldGrid Post and Page Builder! I’ve reviewed the URL you’re having issues with and it looks like your background cover image has too much padding on mobile and it’s squeezing everything inside your text element towards the center of the page.
 
A quick fix for this is to switch from the Visual page editor to the Text editor by clicking the text editor tab in the top right corner of the page builder.
 
Once you have the Text editor open find this bit of code. It should be located towards the top of the page:
<div class="tmpl-about-5 boldgrid-section dynamic-gridblock background-fixed" style="background-image: url('http://blueriverhomes.net/wp-content/uploads/2021/10/AdobeStock_436379408.jpeg');background-size: cover;background-position: 50% 38%;margin: 6px;width: 90%;padding: 9em;" data-image-url="http://blueriverhomes.net/wp-content/uploads/2021/10/AdobeStock_436379408.jpeg">
 
And replace it with this:
<div class="tmpl-about-5 boldgrid-section dynamic-gridblock background-fixed" style="background-image: url('http://blueriverhomes.net/wp-content/uploads/2021/10/AdobeStock_436379408.jpeg');background-size: cover;background-position: 50% 38%;margin: 6px;width: 90%;padding: 1em;" data-image-url="http://blueriverhomes.net/wp-content/uploads/2021/10/AdobeStock_436379408.jpeg">
 
When you do this you’re specifically replacing the padding – padding: 9em; of the element with padding: 1em; which decreases the amount of padding you have around your background element.
 
I always suggest building with a mobile first approach and then scaling the design up for larger screen sizes. This will ensure that you keep the original vision that you imagined for your site intact.
 
I hope this helps! Let us know if you need any further assistance.