Jump to content

Creating a border around an inset image

Recommended Posts

Site URL: https://mushroom-burgundy-58y2.squarespace.com/

Hi!

How can I get the inset image background shown to have the green border flush against the image? I want the image to be that size, not full bleed. Also, why is the top border against the header not displayed?

 

I previously tried to use the image as an image card with the text, but the image was not as wide as I would have liked and the text was formatted terribly in mobile display.

 

I'd really appreciate any help!

1919797998_ScreenShot2021-04-06at9_46_08PM.thumb.png.02473b5ef7e94cc12d4f1008973c296a.png

1262274469_ScreenShot2021-04-06at9_46_19PM.thumb.png.685db8c98068739c2adc7856781a1ab0.png449804127_ScreenShot2021-04-06at9_45_44PM.thumb.png.89edbfbad98a9d7233c2b8be56b61b41.png

Link to comment
24 minutes ago, anna__h said:

Site URL: https://mushroom-burgundy-58y2.squarespace.com/

Hi!

How can I get the inset image background shown to have the green border flush against the image? I want the image to be that size, not full bleed. Also, why is the top border against the header not displayed?

 

I previously tried to use the image as an image card with the text, but the image was not as wide as I would have liked and the text was formatted terribly in mobile display.

 

I'd really appreciate any help!

1919797998_ScreenShot2021-04-06at9_46_08PM.thumb.png.02473b5ef7e94cc12d4f1008973c296a.png

1262274469_ScreenShot2021-04-06at9_46_19PM.thumb.png.685db8c98068739c2adc7856781a1ab0.png449804127_ScreenShot2021-04-06at9_45_44PM.thumb.png.89edbfbad98a9d7233c2b8be56b61b41.png

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
10 hours ago, anna__h said:

@bangank36

site url: https://monroedigital.co

pw: squarespace

 

Thank you!

hope this helps

section[data-section-id="606d1447c1b66454c1baa821"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}
section[data-section-id="606d1447c1b66454c1baa821"] .section-background {
  margin-top: 4vw;
}
section[data-section-id="606d1447c1b66454c1baa821"] .content-wrapper {
  content: '';
    border-top: 3px solid #708238;
    border-right: 3px solid #708238;
    border-left: 3px solid #708238;
    border-bottom: 3px solid #708238;    
    padding: 8vw !important;
}
section[data-section-id="606cd743457fa53a7990cfbf"] .content-wrapper {
  margin-top: -3px !important;
  padding-top: 0 !important;
}

image.thumb.png.589351768a9d3e803d1516fa2a9720d8.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

@anna__h Add to Design > Custom CSS

/* text position */
section[data-section-id="606d1447c1b66454c1baa821"] .content-wrapper {
    padding-left: 20px !important;
    padding-bottom: 20px !important;
}

image.thumb.png.5276c75d0beb71b72e48f806ffe560bc.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

@anna__hand some feedback on your site

Site URL – https://mushroom-burgundy-58y2.squarespace.com/

1. (Tablet-Footer)

tablet-footer-min-2.png

2. (Mobile-About) White space on top/bottom of image – Browser tab name still shows “About 3”

mobile-about-min-2.png

3. (Mobile-Blog posts) Repace pagination title with Prev/Next?

mobile-blog-posts-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
16 hours ago, anna__h said:

@tuanphan Thank you for the feedback & code! Very appreciated 🙂

If you need to fix any problems, just reply here. We will help

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Hi @tuanphan! I have another question.

Any ideas on how to better create two images with text on the right side-by-side like this photo? I've been trying by placing the different blocks next to each other, but it doesn't work well for the text spacing, middle green border, or mobile design. I'd also like the images themselves to have a green border. 

Would greatly appreciate any help! Thank you!!

Screen Shot 2021-04-18 at 2.00.50 PM.png

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.