Jump to content

2 COLUMN GALLERY DISPLAY ON MOBILE

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://www.nbdesignstudio.com/

Hello,

I am using 2 different gallery types on my website (Grid Strips & Strips) and individual image blocks. I would like to be able to resize the Grid Strips, Strips, and Individual image blocks for mobile version if possible and I would like the images for all to also appear 2 side by side for less scrolling .

I been hunting around for a code to revise with my information and use but its not working out for me.

 

If someone can help me with a solution that would be very much appreciated !

 

Also this side of my site is not public yet. I have added a password Duchess2001

 

 

I have tagged the duplicated portfolios w/  "Need Assistance" with the issues I am having 


 

 

 

individual image blocks .png

Grid Strips mobile .png

strips mobile .png

Edited by lisanb
Link to comment
  • Replies 10
  • Views 2k
  • Created
  • Last Reply

Top Posters In This Topic

With this page https://www.nbdesignstudio.com/portfolio-3/lott-ztgty-x76kc-xph3c

Try adding this to Design > Custom CSS

/* Mobile Residence 1 */
@media screen and (max-width:767px) {
div#page-section-62a0ff9b5e3e99690650f1e8 .span-8, div#page-section-62a17578e62f9f5f5e9b3813 .span-8 {
    width: 66.6667% !important;
    float: left !important;
}

div#page-section-62a0ff9b5e3e99690650f1e8 .span-4, div#page-section-62a17578e62f9f5f5e9b3813 .span-4 {
    width: 33.33333% !important;
    float: left !important;
}
.gallery-strips-wrapper.gallery-strips-list--ready {
    height: auto !important;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 10px 10px;
}
figure.gallery-strips-item {
    position: relative !important;
    transform: unset !important;
    width: 100% !important;
}
.gallery-strips-item-wrapper {
    height: auto !important;
}
.gallery-strips-item img {
    height: auto !important;
}
}

 

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

Hi !

 

I actually inserted the code and unfortunately it did not work  this is what happened.. the individual block images were moved beside each other  and there is also huge gaps between and above them.  I actually  needed only the Gallery Strips and Strips block to show up beside each other, that is what I needed help with.

 

 

 

 

image.png

image.png

pic3.png

pic4.png

 

Edited by lisanb
Link to comment

I attached an example of the Strip gallery stacked .. but I would like the images to be shown 2 rows images side by side.  I attached images showing how I would like it to look on the mobile side only.

 

This would be for this page :https://www.nbdesignstudio.com/portfolio-3/lott-ztgty-x76kc-xph3c

the same page you listed 

 

Hopefully this can be resolved ... thank you so much for your help as well ! 

 

Picture7.png

grouping 2.png

grouping 1.png

Link to comment

Try this new code

/* Mobile Residence 1 */
@media screen and (max-width:767px) {
.gallery-strips-wrapper.gallery-strips-list--ready {
    height: auto !important;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 10px 10px;
}
figure.gallery-strips-item {
    position: relative !important;
    transform: unset !important;
    width: 100% !important;
}
.gallery-strips-item-wrapper {
    height: auto !important;
}
.gallery-strips-item img {
    height: auto !important;
}
}

 

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

I Inserted the mobile code and it worked the only odd thing is  i'm experiencing is an un equal gap between 2 of the stacked images. Not sure if it's a glitch (i reloaded nothing changed) or a sizing issue length wise with the inserted image above.

If there is a fix please let me know, however in the meantime I will also consult with the photographer regarding the file size he sent me.

 

Thank You so much you have been such a great help !!!! 😄

Screen Shot 2022-06-15 at 5.08.15 PM.png

Link to comment
  • 1 year later...
On 6/14/2022 at 10:18 PM, tuanphan said:

Try this new code

/* Mobile Residence 1 */
@media screen and (max-width:767px) {
.gallery-strips-wrapper.gallery-strips-list--ready {
    height: auto !important;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 10px 10px;
}
figure.gallery-strips-item {
    position: relative !important;
    transform: unset !important;
    width: 100% !important;
}
.gallery-strips-item-wrapper {
    height: auto !important;
}
.gallery-strips-item img {
    height: auto !important;
}
}

 

Thanks, this worked for me! Is there a way to center the last image if there's only one image in the row? This is what the grid currently looks like, and I'm trying to center the last image between the two above it.

Screen Shot 2024-04-04 at 1.12.46 PM.png

Link to comment
On 4/5/2024 at 12:15 AM, rockeratheart said:

Thanks, this worked for me! Is there a way to center the last image if there's only one image in the row? This is what the grid currently looks like, and I'm trying to center the last image between the two above it.

Screen Shot 2024-04-04 at 1.12.46 PM.png

Can you share link to this page? I can check code easier

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

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.