Jump to content

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.

#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 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.

 

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 9 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

image.thumb.png.54f68f5772bfb2b1bd9926651cbb23e1.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.