Jump to content

Summary list excerpt not centered in mobile view

Recommended Posts

Site URL: https://pufferfish-mauve-jkwn.squarespace.com/new-page-1

Hi! I want a summary list to be displayed with enlarged images and centered excerpt in mobile view. I've added some custom code and sometimes (especially in CSS edit mode) it looks like it's all perfect. But when I exit CSS edit mode and change to full screen the layout changes and the excerpt moves over to the left side. I've attached 2 screenshots so you can see both versions (left side: looking all good in edit mode // right side: shifting to the side in full screen). 

 

image.thumb.png.2044faf3cfc22bc1bcefdc16a00ffbc5.pngimage.thumb.png.510f89c0135abb50da00ba1d6f79f161.png

 

I used the following code:

 

@media screen and (max-width:640px) {
.sqs-gallery-design-list .sqs-gallery-design-list-slide:not(.no-image) .sqs-gallery-meta-container {
    width: 100% !important;
}
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container {
    width: 100% !important;
}
.sqs-block-summary-v2 .summary-block-setting-text-size-medium .summary-title {
   margin-top: 20px;
}
}
.summary-thumbnail-container{
  padding-bottom:40px !important 
}
.summary-excerpt{
  padding-right:20px !important 
}
.summary-thumbnail-container{
  padding-left:20px !important 
}

 

The problem occurs on all my devices (laptop, tablet, android phone) and on all the browsers that I've tried (Microsoft Edge, Chrome, Firefox). So it must be the code but I can't figure it out. 

Anybody out there who can help me with that?? 🙂

Link to comment
  • Replies 16
  • Created
  • Last Reply

Top Posters In This Topic

19 hours ago, FijiAnni said:

@bangank36 Hi! I've seen some posts where you helped people with a similar question. Would you mind having a look at my problem? I would really appreciate your help! 🙂

Mamanuca Islands — Ultimate Fiji Vacations (squarespace.com)

pswrd: Fiji2022'

incorrect password

Fiji2022'

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

When I look at this page the mobile stacking doesn't even occur, so something isn't working right with your Custom CSS. You do potentially have an issue with this code, only the first half is just applied to mobile:

On 9/25/2022 at 8:10 AM, FijiAnni said:

@media screen and (max-width:640px) {
.sqs-gallery-design-list .sqs-gallery-design-list-slide:not(.no-image) .sqs-gallery-meta-container {
    width: 100% !important;
}
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container {
    width: 100% !important;
}
.sqs-block-summary-v2 .summary-block-setting-text-size-medium .summary-title {
   margin-top: 20px;
}
}
.summary-thumbnail-container{
  padding-bottom:40px !important 
}
.summary-excerpt{
  padding-right:20px !important 
}
.summary-thumbnail-container{
  padding-left:20px !important 
}

Try this:

@media screen and (max-width:640px) {
.sqs-gallery-design-list .sqs-gallery-design-list-slide:not(.no-image) .sqs-gallery-meta-container {
    width: 100% !important;
 }
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container {
    width: 100% !important;
 }
.sqs-block-summary-v2 .summary-block-setting-text-size-medium .summary-title {
   margin-top: 20px;
 }
.summary-thumbnail-container{
  padding-bottom:40px !important 
 }
.summary-excerpt{
  padding-right:20px !important 
 }
.summary-thumbnail-container{
  padding-left:20px !important 
 }
}

But as it isn't working correctly at all at the moment, you may be better removing the Custom CSS that is applied to this section, so that the forum can look at it and potentially provide you with some new CSS to achieve what you want.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
10 minutes ago, Ziggy said:

When I look at this page the mobile stacking doesn't even occur, so something isn't working right with your Custom CSS. You do potentially have an issue with this code, only the first half is just applied to mobile:

Try this:

@media screen and (max-width:640px) {
.sqs-gallery-design-list .sqs-gallery-design-list-slide:not(.no-image) .sqs-gallery-meta-container {
    width: 100% !important;
 }
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container {
    width: 100% !important;
 }
.sqs-block-summary-v2 .summary-block-setting-text-size-medium .summary-title {
   margin-top: 20px;
 }
.summary-thumbnail-container{
  padding-bottom:40px !important 
 }
.summary-excerpt{
  padding-right:20px !important 
 }
.summary-thumbnail-container{
  padding-left:20px !important 
 }
}

But as it isn't working correctly at all at the moment, you may be better removing the Custom CSS that is applied to this section, so that the forum can look at it and potentially provide you with some new CSS to achieve what you want.

Thank you for looking into this!! I really appreciate it.

I've  deleted the CSS code earlier today just in case it's easier to try a whole new option. That's why the stacked view wasn't showing anymore 🙂

I've tried your version but the same problem occurs. 

Is there any other code to get the stacked list with larger images and centered excerpt? Thanks!

 

 

 

Link to comment

Try this:

@media only screen and (max-width:640px) {
.sqs-gallery-design-list .sqs-gallery-design-list-slide:not(.no-image) .sqs-gallery-meta-container {
    width: 100% !important;
 }
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container {
    width: 100% !important;
 }
.sqs-block-summary-v2 .summary-block-setting-text-size-medium .summary-title {
   margin-top: 20px;
 }
.summary-thumbnail-container{
  padding-bottom:40px; 
 }
}

 

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
3 hours ago, Ziggy said:

Try this:

@media only screen and (max-width:640px) {
.sqs-gallery-design-list .sqs-gallery-design-list-slide:not(.no-image) .sqs-gallery-meta-container {
    width: 100% !important;
 }
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container {
    width: 100% !important;
 }
.sqs-block-summary-v2 .summary-block-setting-text-size-medium .summary-title {
   margin-top: 20px;
 }
.summary-thumbnail-container{
  padding-bottom:40px; 
 }
}

 

It's still happening 😞 So weird. It always looks great and exactly how I want it in CSS edit mode, but when I look at the actual mobile page in full screen it's shifting to the left. 

Link to comment

Try this:

@media only screen and (max-width:640px) {
.sqs-gallery-design-list .sqs-gallery-design-list-slide:not(.no-image) .sqs-gallery-meta-container {
    width: 100% !important;
 }
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container {
    width: 100% !important;
 }
.sqs-block-summary-v2 .summary-block-setting-text-size-medium .summary-title {
   margin-top: 20px;
 }
.summary-thumbnail-container{
  padding-bottom:20px; 
 }
 .sqs-gallery-design-list .sqs-gallery-image-container {
  padding-right:0px !important;
}
}

The bullet points look like they're pushed right, but they're not actually.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
1 hour ago, Ziggy said:

Try this:

@media only screen and (max-width:640px) {
.sqs-gallery-design-list .sqs-gallery-design-list-slide:not(.no-image) .sqs-gallery-meta-container {
    width: 100% !important;
 }
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container {
    width: 100% !important;
 }
.sqs-block-summary-v2 .summary-block-setting-text-size-medium .summary-title {
   margin-top: 20px;
 }
.summary-thumbnail-container{
  padding-bottom:20px; 
 }
 .sqs-gallery-design-list .sqs-gallery-image-container {
  padding-right:0px !important;
}
}

The bullet points look like they're pushed right, but they're not actually.

No, it still doesn't work 😞 

image.thumb.png.5ccf41dda4e971770bf682091f7deff2.png

Link to comment
24 minutes ago, Ziggy said:

Looks fine to me, how are you viewing it? Have you looked on a real phone? Even in an emulator it looks like this to me:

image.thumb.png.629ab9fd48b899e39f22569849ea8efe.png

I just checked on my phone and now it looks like your screenshot. I might have to adjust the padding a little bit because now it's almost a bit too much on the right side, but other than that it looks good! Thank you! 

Can I assume that this looks good on pretty much all mobiles now? I'm only wondering why it's displayed so weird when I try to check out mobile view on my laptop.

Thank you so much for all your help!

 

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.