Jump to content

How to display 2 or more images in a row in mobile view?

By EduPlusAE, in Fonts, colors and images

Go to solution Solved by tuanphan,

Recommended Posts

EduPlusAE Level 2

EduPlusAE

Posted
Posted (edited)

I am trying to display 2 or more images in a row in mobile view with no luck (simple list layout). I am using carousel layout temporarily to fix it but it looks bad. my website is www.eduplus.ae. I want to change the "our people", "our accreditations", and "our partners" to two images/icons per row... I used codes other people have posted and tried to work around them but nothing changed. If you know how to help with a code, please do so. Thank you.

Edited by EduPlusAE
Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Beyondspace Level 14

Beyondspace

Posted
Posted
On 12/11/2022 at 6:45 PM, EduPlusAE said:

I am trying to display 2 or more images in a row in mobile view with no luck (simple list layout). I am using carousel layout temporarily to fix it but it looks bad. my website is www.eduplus.ae. I want to change the "our people", "our accreditations", and "our partners" to two images/icons per row... I used codes other people have posted and tried to work around them but nothing changed. If you know how to help with a code, please do so. Thank you.

Can you share your site with the protected password so I can take a look?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 4 weeks later...
  • Solution
tuanphan Level 17

tuanphan

Posted
  • Solution
Posted
On 1/7/2023 at 4:43 PM, EduPlusAE said:

https://eduplus.ae/
it's a public site
notice the "our people" and "our programs" icons in mobile view... so big. I want to make them 2 per row for "our people" and 3 per row for "our programs"

Add to Design > Custom CSS 

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="616552a9bc722e148eebf45c"] {
    grid-template-columns: repeat(2,1fr) !important;
}
.user-items-list-item-container[data-section-id="6162ae8eb97706442ccea54f"] {
    grid-template-columns: repeat(2,1fr);
    grid-gap: 20px 20px !important;
}
}

 

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
  • 2 weeks later...

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources