Jump to content

RE: Please help with mobile layout images stacking and sizing terrible!

Recommended Posts

Site URL: http://www.humanbeingmankind.com

THANK YOU SO MUCH! Sorry, i still need a bit more help!

@tuanphan reference from this post: 

 

1. This worked!!! Please advise me of the other code to make all the pages work! 

pages needed for include the all collections page.. but I would like 3 photos per row (6 total so 2 rows 3)

is there anyway to change the order of them.. so that the last items on the desktop are the last items on mobile.. it seems like it fills column 1 then fills column 2...  i would like it to fill row 1, then row 2.. and so on.

 

2. this worked! One thing, now the 'announcement banner' looks a bit strange because theres no padding between it and the banner photo. anyway to put this above the header at very top on mobile just like it is on desktop?  also. this leaves a little bit of awkward space. (see attached for both)

 

3. on the mobile gallery, this also worked.. but one of the rows.. has one photo and then a blank space (see attached)

 

 

IMG_7127.jpg

IMG_7125.jpg

IMG_7126.jpg

Link to comment
  • Replies 1
  • Views 290
  • Created
  • Last Reply

Q1.  Q2. Add to Home > Design > Custom CSS

/* Mobile shop pages */
@media screen and (max-width:640px) {
/* Women */
div#page-5e2bb7484251290eb11ca112 .span-12 .span-4 {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    grid-column-gap: 5px;
}
/* Kid */
div#block-yui_3_17_2_1_1597060030912_11899 + .row .span-4 {
    width: 50% !important;
    float: left !important;
}
/* Men */
div#page-5e2bb782e605b23055de7c42 .span-4:first-child {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
}
div#page-5e2bb782e605b23055de7c42 .span-4:nth-child(n+2) {
    width: 50% !important;
    float: left !important;
}
/* Announcement bar */
.sqs-announcement-bar-dropzone {
    position: fixed;
    top: 0;
    z-index: 999;
    left: 0;
    width: 100%;
}
.Mobile-bar.Mobile-bar--top {
    top: 50px;
}
span.sqs-announcement-bar-close {
    visibility: hidden;
}
}

Q3. Can you share link to gallery?

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

Archived

This topic is now archived and is closed to further replies.

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