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

  • Replies 12
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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!

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:

Add to Design > Custom CSS header.Header.loaded.on-scroll { padding-top: 10px; }  

Posted Images

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

429447732_ScreenShot2021-02-27at4_19_09PM.thumb.png.78c5485360ca9aee2df4ec23ae926994.png

Link to post

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.

1952011845_ScreenShot2021-02-27at4_24_34PM.thumb.png.e4eebf4f6d7792c6c99795b2a730b42f.png

 

Link to post

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.

 

367682319_ScreenShot2021-02-28at1_34_13PM.thumb.png.c774af377b6b62a1ac04e5f29d37770e.png

 

1222163587_ScreenShot2021-02-28at1_34_24PM.thumb.png.7b7efd415b1b80e667f0d2a64ba9700a.png

Link to post
  • 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.

 

367682319_ScreenShot2021-02-28at1_34_13PM.thumb.png.c774af377b6b62a1ac04e5f29d37770e.png

 

1222163587_ScreenShot2021-02-28at1_34_24PM.thumb.png.7b7efd415b1b80e667f0d2a64ba9700a.png

Add to Design > Custom CSS

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

 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...