Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


victor123454

Question

8 answers to this question

Recommended Posts

  • 1

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
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

image.png

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

image.thumb.png.68087420e5e6cde7f6d04faceb2d4ef5.png

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
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

genderfck.squarespace.com-01-min.png

2. (Tablet – Homepage) Text overlap

genderfck.squarespace.com-02-min.png

3. (Tablet – Homepage) The same here

genderfck.squarespace.com-03-min.png

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

genderfck.squarespace.com-04-min.png

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

genderfck.squarespace.com-05-min.png

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

genderfck.squarespace.com-06-min.png

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

genderfck.squarespace.com-07-min.png

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

genderfck.squarespace.com-08-min.png

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

https://genderfck.squarespace.com/apply

genderfck.squarespace.com-09-min.png

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

https://genderfck.squarespace.com/apply

genderfck.squarespace.com-10.png

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

https://genderfck.squarespace.com/apply

genderfck.squarespace.com-11-min.png

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

https://genderfck.squarespace.com/speaking

genderfck.squarespace.com-12-min.png

13. (Tablet -)  The same here

https://genderfck.squarespace.com/speaking

genderfck.squarespace.com-13-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
1 hour ago, tuanphan said:

Do you need -to help these?

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

1. (Tablet – Homepage) Word break

genderfck.squarespace.com-01-min.png

2. (Tablet – Homepage) Text overlap

genderfck.squarespace.com-02-min.png

3. (Tablet – Homepage) The same here

genderfck.squarespace.com-03-min.png

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

genderfck.squarespace.com-04-min.png

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

genderfck.squarespace.com-05-min.png

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

genderfck.squarespace.com-06-min.png

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

genderfck.squarespace.com-07-min.png

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

genderfck.squarespace.com-08-min.png

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

https://genderfck.squarespace.com/apply

genderfck.squarespace.com-09-min.png

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

https://genderfck.squarespace.com/apply

genderfck.squarespace.com-10.png

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

https://genderfck.squarespace.com/apply

genderfck.squarespace.com-11-min.png

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

https://genderfck.squarespace.com/speaking

genderfck.squarespace.com-12-min.png

13. (Tablet -)  The same here

https://genderfck.squarespace.com/speaking

genderfck.squarespace.com-13-min.png

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. 

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

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