Jump to content

Desktop Full Width Image Card Breaking Mobile View

Go to solution Solved by tuanphan,

Recommended Posts

I wanted a full width image card that was 50/50 split with the text on my homepage without overlap.

I managed that, but it completely broke my mobile view by making the card bubble a narrow strip. 

In mobile view, I want a full width picture on top, and the card text below the picture and not overlapping like the default. 

This is the code I have so far: 

// Image Card Full Width //

section[data-section-id="63a0b33ac03b662d662d002d"]{
  overflow-x: hidden !important;
  overflow-y: hidden !important;
    .content-wrapper  {
      padding: auto !important;
      margin: 0px auto;
      display: contents;
    }
.sqs-layout .sqs-row .sqs-block {
  padding-bottom: 0px !important;
  padding-top: 0px !important;
}}
.sqs-block-image-figure {
		.image-inset {
			height: 100% !important;
          width: 90% !important;
		}
		.sqs-image-shape-container-element {
			height: 100% !important;
		}
  .intrinsic {
  width: 60% !important;
}

.image-card-wrapper {
  width: 36% !important
}
	}

@media screen and (max-width:767px) {
.image-block.sqs-block-image .design-layout-card {
    display: flex !important;
    -ms-justify-content: space-between !important;
    justify-content: space-between !important;
}
.sqs-block-image .image-block-outer-wrapper.image-block-v2 .intrinsic {
    width: 125% !important;
}
figcaption.image-card-wrapper {
    margin-top: 15px !important;
      padding-left: 55% !important;
    padding-right: 55% !important;
}
  [data-section-id="63a0b33ac03b662d662d002d"] .image-block figure {
    max-width: 100% !important;
  }
}

I'd really appreciate help! Thank you in advance!

644942541_Screenshot2022-12-19at5_01_25PM.thumb.png.41a7644ac19ad5423b430d9a99fa7d94.png570790956_Screenshot2022-12-19at5_00_56PM.thumb.png.83d6c5323ce1293e9f4ffbbe8937baa9.png

Link to comment
  • Replies 4
  • Views 543
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • Solution
On 12/22/2022 at 4:07 AM, AFZ said:

Sorry, I thought the URL was listed! It's www.ariellazoelle.com 

Add this to bottom of CSS Box

@media screen and (max-width:767px) {
.sqs-block-image-figure .image-card-wrapper {
    width: 95% !important;
    padding: 10px !important;
}
}

image.thumb.png.e7df4ae07829df4e01f4eae8c59f166b.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
18 hours ago, tuanphan said:

Add this to bottom of CSS Box

@media screen and (max-width:767px) {
.sqs-block-image-figure .image-card-wrapper {
    width: 95% !important;
    padding: 10px !important;
}
}

image.thumb.png.e7df4ae07829df4e01f4eae8c59f166b.png

Thank you, that worked perfectly! I appreciate your help, as always, @tuanphan ❤️ 

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.