Jump to content

Please help with mobile layout images stacking and sizing terrible!

Recommended Posts

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

Hi I need help with three things for website humanbeingmankind.com

 

1. on mobile I want to have all of my products display in a 2 per row grid, but i cannot figure this out. please help! specifically referring to all of the pages under the 'shop' tab on the menu bar

2. my banner image on my home page. it looks awful on mobile. is there anyway to have it so that the image shows the same wide angle version on mobile as it does on desktop...instead of the zoomed in tall photo

3. my gallery on the homepage, i would also like these images in a 2x2 grid instead of stacking on top of each other on mobile

Link to comment
  • Replies 8
  • Created
  • Last Reply

1. Add to Home > design > Custom CSS (for New Arrivals, If it works, I will send code for other pages)

@media screen and (max-width:640px) {
div#page-5e2bb6b76db1421c54481b29 .span-3 {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 5px;
    grid-row-gap: 5px;
}
}

2. Add to Home > design > Custom CSS

/* Home mobile banner */
@media screen and (max-width:640px) {
section#hero-image img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#hero-image {
    min-height: unset !important;
    height: 30vh;
}
}

3. Add to Home > design > Custom CSS

/* Home mobile gallery grid */
@media screen and (max-width:640px) {
section#gallery .Index-gallery-inner {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
}
}

 

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
THANK YOU SO MUCH! Sorry, i still need a bit more help!

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
THANK YOU SO MUCH! Sorry, i still need a bit more help!

@tuanphan

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

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

@tuanphan

1. those worked! but i need 2 changes if you can help.. as of now.. the code has it filling each column first .. so column left fills first.... i want to make it so row 1 fills, then row 2 fills. This is important because if I have an odd number of photos then it leaves empty areas. Also.. im 1,2,3,4 (top row on desktop) products are more important to show before my 5,6,7,8 products (row 2 on desk top)

example: my desk top site has image 1,2,3,4 across row one.. then 5,6,7,8 across row 2 left to right

with current code.. column left fills products 1,2,3,4 and then column right fills 5,6,7,8....

i want it to sort by row.. so row one is 1,2 row 2 is 3,4 row 3 is 5,6 and row and row 4 is 7, 8 

 

2. Can you please provide the code for this page https://www.humanbeingmankind.com/ourcollections to sort it in a 2 row, 3 column format.. following the same rule as above. on the mobile row 5 image on the right hand side is just an empty space

 

3. gallery link is humanbeingmankind.com - the gallery is at the bottom of the page under the header "check out our style" on the mobile row 5 image on the right hand side is just an empty space

4. can you help me get rid of the space in the attache photo marked in red 

FullSizeRender.jpeg

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.