How to make image in homepage a full-bleed?

Site URL: https://www.harveyaquino.com

I'd like to have this image in my homepage expand. I'm on 7.0, Haute template.

Thanks!

I can't find that image on your home page.

Oh sorry, here I put it back up.

https://www.harveyaquino.com

Give us some time to look at your issue. I'm about to head off to slumberland myself.

If any of the regulars want to pitch in here please feel free!

Anyone?

Any workarounds?

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:

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.

#block-yui_3_17_2_1_1613893986644_10835{
padding: 0px ! important;
margin-top: -20% !important;
margin-left: -10% !important;
margin-right: -10% !important;
}

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.

I think I found a workaround. 

I made the header position fixed, so that it will always be visible. Now I just have to make it transparent.

Don't know if this will work though.

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.

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;
}

3 hours ago, tuanphan said:

Add to Design > Custom CSS

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

 

This worked perfectly!

Thanks!

Hi! 

I tried this code and it isn't working for me. I am using the native template! Please let me know if you have any suggestions!

Thank you!!! 

9 hours ago, Denimrush said:

Hi! 

I tried this code and it isn't working for me. I am using the native template! Please let me know if you have any suggestions!

Thank you!!! 

What is page url? We can check easier

https://www.garrettcarterdesigns.com/

This is the website - we are trying to push up the images to be full bleed up and side 

8 hours ago, Denimrush said:

https://www.garrettcarterdesigns.com/

This is the website - we are trying to push up the images to be full bleed up and side 

Try adding to Design > Custom CSS

body.homepage div#site {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

body.homepage div#canvas {
    max-width: 100% !important;
}

body.homepage {
    overflow-x: hidden;
}

body.homepage section#page {
    max-width: 100% !important;
}

This code doesn't seem to work for me! I followed the code above from what worked and got the image to be full bleed but cannot get the logo and navigation to show up ontop of the image. Any suggestions?

On 1/14/2022 at 12:36 AM, Denimrush said:

This code doesn't seem to work for me! I followed the code above from what worked and got the image to be full bleed but cannot get the logo and navigation to show up ontop of the image. Any suggestions?

It looks fine to me