Jump to content

How to make homepage image 'full bleed' - using Wells 7.0

Go to solution Solved by tuanphan,

Recommended Posts

Hi everyone.

Really need some help please!

I am using Wells 7.0 and would like my main homepage to have a full bleed image to fill the entire page. I would love it if my site title and navigation contents could be transparent so the main image can be seen behind.

Does anyone know any coding for this?

Here is a screenshot of my homepage.

As you can see there is white space around the border. This will not be the chosen image but it is an example. I have also attached a screen shot of a website that I like.

Thank you so much in advance,

Ella

image.thumb.png.a86c4675116aef4c7cff11c12526b302.pngimage.thumb.png.70a3e7196b8fad64b9aaa7ad0f2fe3b6.png

Link to comment
  • Replies 15
  • Created
  • Last Reply

Top Posters In This Topic

On 5/6/2023 at 4:08 PM, Ellares said:

Hi Tuanphan,

 

Thanks for your reply!

The URL is orb-lettuce-mngc.squarespace.com (currently very basic 😆)

 

Can you use another image with no white border on left? We can test some code to achieve below easier

Quote

my site title and navigation contents could be transparent so the main image can be seen behind.

 

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
  • 2 weeks later...
On 5/9/2023 at 8:26 AM, tuanphan said:

Can you use another image with no white border on left? We can test some code to achieve below easier

 

Thanks, I have just changed the image to one with less white 🙂

Link to comment
  • Solution
On 5/19/2023 at 1:30 AM, Ellares said:

Thanks, I have just changed the image to one with less white 🙂

Add to Design > Custom CSS

body.homepage div#pageWrapper {
    margin-left: 0 !important;
    width: 100% !important;
}
body {
    overflow-x: hidden;
}
body.homepage div#canvas {
    padding: 0 !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
16 hours ago, tuanphan said:

Add to Design > Custom CSS

body.homepage div#pageWrapper {
    margin-left: 0 !important;
    width: 100% !important;
}
body {
    overflow-x: hidden;
}
body.homepage div#canvas {
    padding: 0 !important;
}

 

Wow! thank you so much Tuanphan! I really appreciate your help 🙂 

Link to comment
On 5/25/2023 at 9:47 AM, tuanphan said:

Add this code under

div#block-yui_3_17_2_1_1683126120335_3903 {
    padding: 0 !important;
}

 

Hi Tuanphan,

Unfortunately it didn't fill the mobile/tablet screen. It still has a white border along the top. Do you think more padding can be removed?

Thanks in advance, Ella

Link to comment
On 5/6/2023 at 4:08 PM, Ellares said:

Hi Tuanphan,

 

Thanks for your reply!

The URL is orb-lettuce-mngc.squarespace.com (currently very basic 😆)

 

You mean like this?

image.thumb.png.5a757818393ec7d1070acae175ebbe9f.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
On 6/3/2023 at 6:39 AM, tuanphan said:

You mean like this?

image.thumb.png.5a757818393ec7d1070acae175ebbe9f.png

Try adding to Design > Custom CSS for mobile

@media screen and (max-width:640px) {
body.homepage section#page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    overflow: hidden;
}
body.homepage {
    overflow: hidden !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

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.