Add full bleed images with text and button overlay

Hello! I want both of my images to be full bleed in the top section of the site.

The left image needs to have text and button overlay.

I'm thinking is there a way to stack to sections horizontally instead of vertically?

I also need the vertical line to be top to bottom.

This is my design:

And this is what I have been able to achieve in Squarespace so far:

Hi. You can keep text - image, remove line, then share link to your site. We will give the code to achieve desired layout.

Thank you so much!

Website here: https://www.jasminewallis.com.au/

Password: jasmine101

Thanks so much!!

23 hours ago, elizablake said:

Thank you so much!

Website here: https://www.jasminewallis.com.au/

Password: jasmine101

Thanks so much!!

Add to Design > Custom CSS

/* Homepage top section */
body.homepage article section:first-child .content-wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 0 !important;
}
body.homepage article section:first-child .content {
    width: 100% !important;
}
html, body {overflow-x:hidden;}
div#block-yui_3_17_2_1_1621409194821_3061 {
    border-left: 2px solid black;
    padding-left: 0;
	padding-bottom:0 !important;
}

Thank you so much for that! There are still a couple of things that need to be fixed as you can see in the screenshot below:

• The text is sitting quite flush to the top, are we able to vertically center this text or add more padding to the text top and left?
• There is no line underneath the image

Thanks again!

Ok never mind I fixed those 2 things, but having issues with responsiveness. It goes real weird when the screen size is less. Can you please help?

On 5/27/2021 at 7:36 AM, elizablake said:

Ok never mind I fixed those 2 things, but having issues with responsiveness. It goes real weird when the screen size is less. Can you please help?

Can you create a test page, add a blank section >> add background image then add 2 columns

left is text

right is spacer block

Then I will code to achieve above layout. I think it won't have 2 problems above.

Thanks. I have added as you said under "test" you will see this in nav bar. Thanks!

On 5/28/2021 at 7:32 PM, tuanphan said:

Then I will code to achieve above layout.

I think I have fixed this myself, but now I'm looking to achieve the same thing with the images on the About page.

I think I will be fine to figure it out I just need help finding what to call these sections. E.g. this is the code used for the homepage first section:

body.homepage article section:first-child .content-wrapper {

When I used Google Chrome's Inspect tool, how/where do I find out what I need to call the sections on the about page?

On 5/31/2021 at 2:07 PM, elizablake said:

I think I have fixed this myself, but now I'm looking to achieve the same thing with the images on the About page.

I think I will be fine to figure it out I just need help finding what to call these sections. E.g. this is the code used for the homepage first section:

 

body.homepage article section:first-child .content-wrapper {

 

When I used Google Chrome's Inspect tool, how/where do I find out what I need to call the sections on the about page?

replace this

Quote

body.homepage article section:first-child

with data-section-id

Use this tool to find data section id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

14 hours ago, tuanphan said:

Use this tool to find data section id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Ahhhh thank you so much!! What a great tool! I'm still having issues when going to smaller screen size (only for tablet size now), mobile is ok. Do you know how to fix this?

On 6/2/2021 at 12:19 PM, elizablake said:

Ahhhh thank you so much!! What a great tool! I'm still having issues when going to smaller screen size (only for tablet size now), mobile is ok. Do you know how to fix this?

What problem on tablet?