Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Add full bleed images with text and button overlay


elizablake

Question

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:

1918056877_ScreenShot2021-05-20at12_25_32pm.png.b833df6ad4c683b89df14ce68eccce62.png

 

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

328185652_ScreenShot2021-05-20at12_25_49pm.thumb.png.5e1b0dc809afe7d2aa984370c89bcd37.png

Link to comment
  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

11 answers to this question

Recommended Posts

  • 0

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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!

 

478460923_ScreenShot2021-05-27at10_22_02am.thumb.png.dd30dbe7bff74dc762e4256cedda9422.png

 

Link to comment
  • 0
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?

Screen Shot 2021-05-27 at 10.35.15 am.png

Screen Shot 2021-05-27 at 10.35.27 am.png

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.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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?

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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