2 COLUMN GALLERY DISPLAY ON MOBILE

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 

It’s under the “Portfolio” page the password is :  Duchess2001

https://www.nbdesignstudio.com/. (under portfolio tab if link at bottom does not work ) 

https://www.nbdesignstudio.com/portfolio-3 

password for portfolio page  : Duchess2001

The portfolios w/ Lott Residence "Need Assistance" is the pages with the issues I am having 

Projects ——> Lott Residence Needs Assistance & Lott Residence 1 Needs assistance 

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;
}
}

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.

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 ! 

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;
}
}

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 !!!! 😄