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

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

Hi,

What is site url?

Hi Tuanphan,

Thanks for your reply!

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

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.

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 🙂

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 🙂 

I notice it works perfect for desktop viewing but on iPad/phone it still appears with a white block. Is this something that can be changed with code?

thank you again 🙂

Add this code under

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

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

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?

On 6/3/2023 at 12:39 AM, tuanphan said:

You mean like this?

Yes that would be great 🙂

On 6/3/2023 at 6:39 AM, tuanphan said:

You mean like this?

The site is private now. Can you check it again?

2 hours ago, tuanphan said:

The site is private now. Can you check it again?

I have made it public again 🙂

3 minutes ago, Ellares said:

I have made it public again 🙂

I just made it password protected - password is 1234

On 6/3/2023 at 6:39 AM, tuanphan said:

You mean like this?

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

}