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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, 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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, 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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, 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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, 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.