Jump to content

Quick CSS Question-Image Blocks

Recommended Posts

  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

5 hours ago, Brooke_Shea said:

Site URL: https://thebombshellboss.com

Can someone PLEASE help me? I have tried every code and trick I can think of and I cannot seem to replicate the image with the block and button overtop (top of webpage on the right hand side) with full bleed. Any guesses? TIA! 

Screen Shot 2021-03-30 at 12.42.40 AM.png

They are actual 2 section display side-by-side,what is your site url

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

@bangank36 I know that, I have already figured out the split bleed, its the card on the left I can't figure out how to replicate. the screenshot shows where I am now, but I want to add a card with a button on the left side 

Screen Shot 2021-03-30 at 9.21.13 AM.png

Link to comment
1 minute ago, Brooke_Shea said:

@bangank36 I know that, I have already figured out the split bleed, its the card on the left I can't figure out how to replicate. the screenshot shows where I am now, but I want to add a card with a button on the left side 

Screen Shot 2021-03-30 at 9.21.13 AM.png

Could you share your site url?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
2 hours ago, Brooke_Shea said:

@bangank36 here it is! https://garlic-lettuce-ygc9.squarespace.com/ password: minted 

I appreciate you looking at it! Ive been trying for weeks! 

here is the website with the card I am trying to recreate https://thebombshellboss.com

It can be achieved easier with 2 sections side by side

1. Create 2 sections, 1st create a stacked image block (enable link on button to show a button), 2nd leave empty or whatever you want. 

Add this image as image block about-stack.png (750×5) (squarespace-cdn.com), to get rid of the image style (we actually need the text and button here)

2. Grab the 1st section id using this tool, eg: section[data-section-id="60634f74ae24ab594f088b02"]

Squarespace ID Finder - Chrome Web Store (google.com)

3. Once you get your section's id using the extension, replace the it accordingly in this snippet

@media only screen and (min-width: 768px) {
    section[data-section-id="60634f74ae24ab594f088b02"],
    section[data-section-id="60634f74ae24ab594f088b02"] + .page-section {
      width: 50%;
      float: left;
    }
}

Admin set up and actual look of this proof-of-concept attached, I believe you can make some tweaks such as adding section background...

image.thumb.png.0aac4672972e012548fae02e3fa2a224.png

image.thumb.png.7d374146dc0da9b6823554f19bab6c61.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
1 hour ago, bangank36 said:

Add this image as image block about-stack.png (750×5) (squarespace-cdn.com), to get rid of the image style (we actually need the text and button here)

 

First off thank you SO MUCH for taking the time to help me with this! This is the only part im having an issue with and I am not sure if its because I am a 7.1 template, but I cannot seen to add this image link into the block like I could on a 7.0 template? 

It is possible I have been looking at this page so long I am missing something obvious, but let me know! 

Link to comment
5 hours ago, Brooke_Shea said:

First off thank you SO MUCH for taking the time to help me with this! This is the only part im having an issue with and I am not sure if its because I am a 7.1 template, but I cannot seen to add this image link into the block like I could on a 7.0 template? 

It is possible I have been looking at this page so long I am missing something obvious, but let me know! 

Just download the image and upload to your site

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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.