Creating a border around an inset image

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!

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!

What is your site url

@bangank36

site url: https://monroedigital.co

pw: squarespace

Thank you!

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;
}

@bangank36 Thank you so much! So appreciated.

@bangank36 I actually have one more question if you wouldn't mind answering: how could I move the text to the area illustrated (bottom left corner)? I've tried lessening the margins of the text block with CSS but it cuts off the text in mobile display.

@anna__h Add to Design > Custom CSS

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

@anna__hand some feedback on your site

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

1. (Tablet-Footer)

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

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

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

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

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