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

Images side by side on mobile


TOMweb
Go to solution Solved by TOMweb,

Question

Site URL: https://endive-denim-89ds.squarespace.com/resorts

pw: 1404-Hello

Hi community,

I have made a wall of images on my page that looks great on desktop, but feels way too long on mobile. I would like to display two images per row (kind of like an instagram page) for mobile screens only. I have tried with the code below that targets the section only, but it doesn't put the images side by side...

Any help is appreciated. Thank you !

@media screen and (max-width:767px) {
div#page-section-5fd63cbbc4373837b905ef57>.row {
    display: float;
    justify-content: space-between;
    align-items: center;
  width: 50% !important;
  float: left;
}}

 

Link to post
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

4 answers to this question

Recommended Posts

  • 0

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-YOURSECTIONID>.row>.col>.row>.col {
    width: 50% !important;
    float: left !important;
}
}

🙂

Link to post
  • 0
On 12/14/2020 at 7:53 AM, TOMweb said:

Add to Design > Custom CSS



@media screen and (max-width:767px) {
div#page-section-YOURSECTIONID>.row>.col>.row>.col {
    width: 50% !important;
    float: left !important;
}
}

🙂

Hi! I'm trying to do the same thing on my side, but my images are all still in 1 single column when on mobile, just smaller when I use this code. The link is https://www.nuligoods.com/about-1

This is the code I'm using:

@media screen and (max-width:767px) { div#page-section-603dd0a5df73097abcd0eda4>.row {
    display: float;
    justify-content: space-between;
    align-items: center;
    width: 50% !important;
  float: left;
}}
@media screen and (max-width:767px) { div#page-section-603dd0a5df73097abcd0eda4>.row>.col>.row>.col {
    width: 50% !important;
    float: left !important;
}}

Any help is so appreciated!

@tuanphan

Link to post
  • 0
On 3/2/2021 at 12:57 PM, Leah007 said:

Hi! I'm trying to do the same thing on my side, but my images are all still in 1 single column when on mobile, just smaller when I use this code. The link is https://www.nuligoods.com/about-1

This is the code I'm using:

@media screen and (max-width:767px) { div#page-section-603dd0a5df73097abcd0eda4>.row {
    display: float;
    justify-content: space-between;
    align-items: center;
    width: 50% !important;
  float: left;
}}
@media screen and (max-width:767px) { div#page-section-603dd0a5df73097abcd0eda4>.row>.col>.row>.col {
    width: 50% !important;
    float: left !important;
}}

Any help is so appreciated!

@tuanphan

Remove your code & add this code

/* Mobile images side by side */
@media screen and (max-width:767px) {
div#page-section-603dd0a5df73097abcd0eda4 .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-section-603dd0a5df73097abcd0eda4 .span-3:nth-child(2n+1) {
    clear: left !important;
}
}

 

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