Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

How to make image in homepage a full-bleed?

Recommended Posts

On 2/23/2021 at 9:05 PM, derricksrandomviews said:

Haute and Farro, in style tweaks you can adjust the padding on both sides of the site. I assume that means you can remove it which should widen the site to full bleed. 

This may help as well:


Hi! Thanks for this. However, putting the site padding value to 0 affects everything including the navigation buttons. I would like it just for the image block. And second, it only makes the image full-width.

I tried this code below and I got what I wanted for the image but now it also covers my logo and navigation.

padding: 0px ! important;
margin-top: -20% !important;
margin-left: -10% !important;
margin-right: -10% !important;


Link to comment

To give you an idea of what I'm trying to achieve, here is a screen cap of one of my blog posts. This is a I think one of the features of Haute, that's why I love this template for blogging. You can set full-bleed banner images for each blog posts. I just hope I can do this with my homepage.



Link to comment
  • 2 weeks later...
On 2/28/2021 at 12:40 PM, HarveyAquino said:

Update: It worked! 

This is what my homepage looks like at the moment. I also made the navigation bar change color when scrolling. Now I just have to find a way to reduce the space above the header when scrolling.





Add to Design > Custom CSS

header.Header.loaded.on-scroll {
    padding-top: 10px;


Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...