Summary block: list view for mobile and grid view for desktop, css

Site URL: https://www.familjeterapeuterna.com/vi-allihopa

Hi, 

I want my summary blocks to show the list layout when displaying on mobile and grid layout when displaying on desktop. Is this feasible? 

Thank you!

Desktop: 

Mobile:

: 

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
body#collection-5c6036094192028682dec481 {
.summary-thumbnail-outer-container {
    width: 40%;
    float: left;
}
.summary-thumbnail-outer-container img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
.summary-content.sqs-gallery-meta-container {
    width: 60%;
    float: left;
}
}
}

Thank you @tuanphan ! You're a true hero on this forum 🙂 

@tuanphan Any help appreciated! I'd like the opposite- I want the list summary image to stack on top on mobile and tablet.

current mobile view image attached.

https://genderfck.squarespace.com/

pw: gf21

Also how can I get rid of the white bit under the image for all media-queries?

On 7/2/2021 at 4:24 AM, nicolettely said:

@tuanphan Any help appreciated! I'd like the opposite- I want the list summary image to stack on top on mobile and tablet.

current mobile view image attached.

 

https://genderfck.squarespace.com/

pw: gf21

Also how can I get rid of the white bit under the image for all media-queries?

Add to Design > Custom CSS

/* Tablet-Mobile-Home-Summary */
@media screen and (max-width:991px) {
div#block-yui_3_17_2_1_1625156226057_4585 {
a.summary-thumbnail-container.sqs-gallery-image-container {
    padding-left: 0 !important;
}
.summary-thumbnail-outer-container {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
}
.summary-content.sqs-gallery-meta-container {
    width: 100% !important;
    float: none !important;
}
}
}
/* Home summary white under image */
@media screen and (min-width:992px) {
#block-yui_3_17_2_1_1625156226057_4585 .sqs-gallery-design-list .sqs-gallery-meta-container {
    padding-top: 50px !important;
}
#block-yui_3_17_2_1_1625156226057_4585 .summary-item {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
}

@tuanphan Thank you so much!!

On 7/13/2021 at 10:50 PM, nicolettely said:

@tuanphan Thank you so much!!

Do you need -to help these?

Site URL: https://genderfck.squarespace.com/

1. (Tablet – Homepage) Word break

2. (Tablet – Homepage) Text overlap

3. (Tablet – Homepage) The same here

4. (Mobile- Homepage) Background image doesn’t show in full size

5. (Mobile- Homepage) Background image doesn’t show in full size

6. (Tablet – Overlay menu > About) Text overlap

7. (Tablet – Overlay menu > Work with me) The same here

8. (Tablet – Overlay menu > Free resources) The same here

9. (Mobile – Work with me) Background image doesn’t show in full size

https://genderfck.squarespace.com/apply

10. (Mobile – Work with me) Button overlap on image

https://genderfck.squarespace.com/apply

11. (Mobile – Work with me) Text overflow outside box

https://genderfck.squarespace.com/apply

12. (Tablet -)  Reduce space above/below text

https://genderfck.squarespace.com/speaking

13. (Tablet -)  The same here

https://genderfck.squarespace.com/speaking

1 hour ago, tuanphan said:

Do you need -to help these?

Site URL: https://genderfck.squarespace.com/

1. (Tablet – Homepage) Word break

2. (Tablet – Homepage) Text overlap

3. (Tablet – Homepage) The same here

4. (Mobile- Homepage) Background image doesn’t show in full size

5. (Mobile- Homepage) Background image doesn’t show in full size

6. (Tablet – Overlay menu > About) Text overlap

7. (Tablet – Overlay menu > Work with me) The same here

8. (Tablet – Overlay menu > Free resources) The same here

9. (Mobile – Work with me) Background image doesn’t show in full size

https://genderfck.squarespace.com/apply

10. (Mobile – Work with me) Button overlap on image

https://genderfck.squarespace.com/apply

11. (Mobile – Work with me) Text overflow outside box

https://genderfck.squarespace.com/apply

12. (Tablet -)  Reduce space above/below text

https://genderfck.squarespace.com/speaking

13. (Tablet -)  The same here

https://genderfck.squarespace.com/speaking

Wow thanks for looking!

I actually havent gone through the mobile/tablet optimization process yet. I use squarekicker to help with that mostly. although I swear a few of these issues are not showing up for me in tablet mode! That is frustrating. 

18 hours ago, nicolettely said:

Wow thanks for looking!

I actually havent gone through the mobile/tablet optimization process yet. I use squarekicker to help with that mostly. although I swear a few of these issues are not showing up for me in tablet mode! That is frustrating. 

If you need to fix these, just reply here, we will support