- Posts
Hello,
My homepage image is not expanding to the full size, and I am hoping you could please help me with that?I have gone through the Customizer- and the page layout is set to full width.
The padding and margins are both set to 0%.
It appears in the dashboard to be full sized, but when I preview it, it has a white border.
The other images do not have this, it is the only one.I also believe it did not do this at one point, as I have changed things around here and there, but now I am at a loss to get it to the full size I wish it to be.
Please help!
Thank youHi Rebecca, sorry to hear that your image isn’t expanding to the expected size!
It sounds like you’ve tried most of the normal troubleshooting steps and something else is definitely going on. Unfortunately your website is hidden behind an Under Construction page and I am unable to take a look at the page source code to see if I can find where the problem is coming from, but I do have an idea that might get things working again.
Full Width sections created with the Post and Page Builder inherit some default margin and padding rules from the Crio theme that allow them to expand the full width of the page. My current theory is that setting the margin and padding values to zero in the Advanced Controls is somehow overriding the expected defaults.
Open the Advanced Controls for that section on your home page and set the Right and Left Padding values to 20px, leave the Top and Bottom ones at zero. Then go to the Margins section and set a value of -20px (this needs to be a negative value to offset the Padding) with the Left and Right sliders, leaving the Top and Bottom at zero again.
Hopefully this solution fixes the problem you are seeing with the image, but if not then we will likely need you to temporarily disable the Under Construction mode so our team can look more closely at the page and figure this one out. Please let us know if you have any other questions for us Rebecca!
Thank you!! Your suggestion made sense, and trying it did make the image appear larger on my computer screen (it was extended beyond the full width). However, it still did not extend when I looked on my cell phone view. The website is active now so you can also see it.
Thank you again,
BeckyHi Rebecca,
Thanks for the update. I can see what you mean. Right now, your top section still has a
margin: 0pxsetting, which is overriding the correct margin for that element. The easiest way to fix this would actually be to switch to the Text Editor tab, and simply delete the margin.Here’s how it looks now:
<div class="boldgrid-section background-scroll color-3-text-contrast color3-background-color" style="background-image: linear-gradient(to left, rgba(109, 164, 216, 0.11), rgba(109, 164, 216, 0.11)), url('https://frakercpa.com/wp-content/uploads/2021/08/6-ogBbjnD_caQ-1080x608-1.jpg'); background-size: cover; background-position: 50% 100%; margin: 0px; padding: 0em;" data-imhwpb-asset-id="1181355" data-image-url="https://frakercpa.com/wp-content/uploads/2021/08/6-ogBbjnD_caQ-1080x608-1.jpg" data-bg-overlaycolor="rgba(109,164,216,0.11)">And here’s how it would look with the margin taken out:
<div class="boldgrid-section background-scroll color-3-text-contrast color3-background-color" style="background-image: linear-gradient(to left, rgba(109, 164, 216, 0.11), rgba(109, 164, 216, 0.11)), url('https://frakercpa.com/wp-content/uploads/2021/08/6-ogBbjnD_caQ-1080x608-1.jpg'); background-size: cover; background-position: 50% 100%; padding: 0em;" data-imhwpb-asset-id="1181355" data-image-url="https://frakercpa.com/wp-content/uploads/2021/08/6-ogBbjnD_caQ-1080x608-1.jpg" data-bg-overlaycolor="rgba(109,164,216,0.11)">Ah, Yes!! That fixed the issue!! Thank you!!!
- The topic ‘homepage full size background image has a border around it’ is closed to new replies.
