Mobile view optimization help

Site URL: https://www.imperialcitizenship.com

Hi Squarespace, I need help with image card blocks on mobile view.

The blocks are not totally centered why is this?

Looks like you've put some custom CSS in your site which sets the max-width to 90% for that section, so you're getting a 10% buffer on the right hand side

section[data-section-id="60fbf7ef70e98847868eeb6c"] .sqs-block-image, section[data-section-id="60fb96326797f949319ca91b"] .sqs-block-image {
    filter: grayscale(100%);
    max-width: 90%;
}

I assume you added this when laying out your images for desktop. not sure why the max-width is in there, but you need to come up with an alternative plan if you think you really need it. One way would be to wrap this custom rule in a media query so the 90% only applies at desktop widths. (leave the monochrome filter in its own rule so it works on mobile too). Use this in your custom css in place of wherever you put the above rule in.

section[data-section-id="60fbf7ef70e98847868eeb6c"] .sqs-block-image, section[data-section-id="60fb96326797f949319ca91b"] .sqs-block-image {
    filter: grayscale(100%);
}

@media screen and (min-width: 767px) {
  section[data-section-id="60fbf7ef70e98847868eeb6c"] .sqs-block-image, section[data-section-id="60fb96326797f949319ca91b"] .sqs-block-image {
      max-width: 90%;
  }
}

Hope that helps