Summary list excerpt not centered in mobile view

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

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?? 🙂

Anyone who can help me with this, please? 🙂

Is there anyone who knows how to center the excerpt in mobile view (as described above)?

I'm almost done with my website but this is the last major issue I have 😞

Thanks in advance!

@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'

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'

55 minutes ago, tuanphan said:

incorrect password

Fiji2022'

should be correct now. Can you try again?

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.

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!

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

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. 

Without leaving the code installed, I can't see or diagnose the problem, sorry!

23 minutes ago, Ziggy said:

Without leaving the code installed, I can't see or diagnose the problem, sorry!

Ok sorry -  I have now saved the code, so you can see what the problem is. Thanks! 

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.

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 😞 

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:

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:

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!

That can happen sometimes when emulating on a desktop, but still good on mobiles as far as I can see!