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
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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

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

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.