Reformatting a list summary block for mobile

Password: BES!

Hello,

I am trying to reformat summary blocks of blog content for mobile on the knowledge page. Right now the photo is very small and I want the photo to be stacked on top of the rest of the content. I figured out how to change it to a column with this code:

@media(max-width:640px) {
.summary-item {
  display: flex;
    flex-direction:column !important;
  }
  .summary-thumbnail-outer-container > * {
  width: 100% !important;
}
}

But the photo is still very small. One of the other issues is I edited the css for desktop of the title and all the corresponding metadata to have a 40px padding on the left, so that may be messing with it. Any help would be greatly appreciated :)

@bbradley can you share the link?

@jaeveedee yes, of course! https://bes.squarespace.com/

Seems ok to me at the moment but sometimes those images get hard coded numbers generated by a script when they load. Maybe this will work? This will probably break your focal points if you've got those set on your images anything other than center but it should make them be sure to fill the container.

@media only screen and (max-width: 640px) {
  .sqs-gallery-design-carousel .summary-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

@jaeveedee hmm it still looks like this. I think it may be because it is a blog list item and not a carousel?

@jaeveedee or is there a way to make the container larger, when I inspect the page it is only the size of the image. Could that be the problem?

ahh yea, I was looking at the wrong page. See if this works, some of your code might override it but if you put it in we can inspect and figure out how to get it to work.

@media only screen and (max-width: 640px) {
  .sqs-block-summary-v2 .summary-block-setting-design-list {
    .summary-thumbnail-outer-container {
      width: 100% !important;
    }
    .summary-thumbnail-container {
      padding-right: 0 !important;
    }
    .summary-content {
      width: 100% !important;
    }
    .summary-title, .summary-excerpt, .summary-read-more-link, .summary-metadata-item {
      padding-left: 0 !important;
    }
  }
}

@jaeveedee YES, thank you so much! The only thing is the text boxes still aren't getting rid of the padding and it looks like the text box is not full width. I could always make the text smaller for mobile if we can't figure that out!

@jaeveedee I got it to go a little further to the right with this, but still not fixing most of it, so I deleted it out.

@media only screen and (max-width: 640px) {

  .summary-title-link {

font-size:40px;

    width: 100% !important;

}

}

try it like this instead

@media only screen and (max-width: 640px) {
  #block-9184d00069f6322414f9.sqs-block-summary-v2 .summary-block-setting-design-list {
    .summary-thumbnail-outer-container {
      width: 100% !important;
    }
    .summary-thumbnail-container {
      padding-right: 0 !important;
    }
    .summary-content {
      width: 100% !important;
    }
    .summary-title, .summary-excerpt, .summary-read-more-link, .summary-metadata-item {
      padding-left: 0 !important;
    }
  }
}

Thank you so much @jaeveedee! I just had one follow up question. For some reason just the news page does not seem to be following suit. I have tried editing it individually, but it messed with it on desktop. Any chance you could help me out with identifying the issue, thank you 🙂

@media only screen and (max-width: 640px) {
  .sqs-block-summary-v2 .summary-block-setting-design-list {
    .summary-thumbnail-outer-container {
      width: 100% !important;
    }
    .summary-thumbnail-container {
      padding-right: 0 !important;
    }
    .summary-content {
      width: 100% !important;
    }
    .summary-title, .summary-excerpt, .summary-read-more-link, .summary-metadata-item {
      padding-left: 0 !important;
    }
  }
}

@bbradley do you want this for every list summary block on the site? If so just change the code to this.

@jaeveedee Hey, yeah, but I don't know, something is still broken only with the news page on mobile and I just don't understand why. I have tried making an entirely new summary block as well!

Are you maybe in the editor? It looks fine to me on my phone and in responsive mode on safari other than maybe the font being really big.

@jaeveedee it is fine on the news tab, but under all, if you scroll all the way down to the new section it is not responding for some reason!

It looks like you're using Block IDs You need the block id of this summary too.