Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Thursting

Summary Block Coding (Mobile) - Images per row

Question

Site URL: https://tortoise-dove-xgz3.squarespace.com/

Hello SS community,

I am working on a team page and I am using a summary block to display each members profile picture - I have found some code that allows me to have 3 images per row on the mobile view which is great. 

However, I encountered a slight problem when I gave the images titles + descriptions - This adds a bottom margin to each image and consequently pushes the below images further down the page.

Example: https://gyazo.com/820812f30aec47f0c3aa680fef7c9515 <- The image blocks have been pushed further down the page.

Here is an example of the margin I am referring to (Orange block): https://gyazo.com/d19155634c7f38790c7552722d177f9c I have managed to code the orange and make the bottom margin 0px, however this is just for that single image and not all the images withing the summary block. So when I thought I had fixed it, I added a title + description to the second image and it caused the same fault, pushed everything down the page.

Unfortunately the code doesn't apply to the other image blocks - I was wondering if anyone with a bit more skill than me can help me with targeting all the images within the summary block and not just one.

Please message me if you need password access to my site.

Thanks for help!

 

 

Edited by Thursting

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 0

Sent answer

<style>
  @media screen and (max-width:640px) {
.sqs-block-summary-v2 .summary-item-list {
    display: flex;
    flex-wrap: wrap;
}
  }
</style>

 


COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...