Jump to content

Changing size of thumbnails of summary blocks on mobile

Recommended Posts

Site URL: http://www.wearehkers.com

Hello,

(This issue is on my template preview site that's not live yet, so I'm not sure what hyperlink I should be sharing, let me know how to share this particular page in the particular template preview)

I'm trying to make the thumbnails of the summary blocks take up 50% of the screen space on mobile screen. I've set it to 50% on site styles so it is 50% on desktop and tablet, but on mobile, some reason it's been overridden to 35% (see bottom right in the "inspect element" section... I've even tried to code it in to the css but it's not changing. I've included the code I used below. I'm not sure why it's being overriden because the style attribute in the styles window says 50% but has it crossed out... I've tried coding the summary block text to 50% too but the same happens, it's overridden to 65% even when I've coded it to 50%... Please can someone help, maybe my code is wrong...

 

Code I used:

@media screen and (max-width:700px) {
.summary-thumbnail .img-wrapper {
  overflow: visible !Important;
}
.sqs-block-summary-v2 .summary-thumbail-outer-container {
  width: 50% !Important;
  height: auto !Important;
}
.sqs-gallery-meta-container {
  width: 50% !Important;
}
}

image.thumb.png.9157965286f119509580b4aa765ed266.png

image.png.29db517d2c6df27296c5bd67ba73b4bf.png

Link to comment
  • Replies 0
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.