How To Resize Gallery Section for Mobile

How To Resize Gallery Section for Mobile

Mobile users are a significant portion of website visitors. Customizing the size of your gallery for mobile devices ensures that your website looks and functions well on smaller screens. To provide a better user experience, you must know how to resize gallery section for mobile. Squarespace provides a user-friendly website-building platform, but it may have limitations in terms of mobile responsiveness customization. built-in options don’t offer the specific control you need over your gallery’s size on mobile devices, custom code can help you achieve your desired result. In this beginner-friendly guide, I’ll walk you through the step-by-step process for  How To Resize Gallery Section for Mobile.

Custom code can be used to implement responsive design principles, ensuring your website adapts seamlessly to different screen sizes and orientations. This is crucial for maintaining a professional and user-friendly website. if you have a specific design vision for how your gallery section should appear on mobile, custom code allows you to tailor it precisely to your preferences. This level of customization might not be achievable through the platform’s standard settings alone.

Squarespace’s platform may receive updates or changes over time, potentially affecting how custom code interacts with your website. Therefore, it’s a good practice to regularly check your website after implementing custom code to ensure that it continues to function correctly. 

To change the size of a Squarespace gallery section on mobile, you’ll need to use custom CSS code. Squarespace provides a built-in custom CSS editor that allows you to add your own CSS code to style and modify your website’s elements.

Note: Before making any changes to your site’s CSS, it’s a good practice to create a backup or duplicate of your website in case anything goes wrong.

Here’s a step-by-step guide on how to do it:

  • Log in to your Squarespace account and access the website you want to edit.
  • In the Squarespace editor, go to the design section and click on custom css.
  • Once you’ve identified the gallery section, you can write CSS code to change its size on mobile. You can adjust the width value to your desired size, and you can also add other CSS properties to further style the gallery.

Change Gallery Reel

If you want to change the size of the gallery reel on the mobile screen, use the following code:

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

height: inherit!important

How To Resize Gallery Section for Mobile

replace the values for screen (767px) and height according to your needs.

Change Full Screen

Use the following code for full screen:

@media only screen and (max-width:767px) {
height: 30vh!important

How To Resize Gallery Section for Mobile

Change Slideshow

If you want to customize the slideshow on the mobile screen, use the following code:

@media only screen and (max-width:767px) {
.gallery-slideshow-item-wrapper, .gallery-slideshow-item img{
width: 100vw!important;
object-fit: cover;
left: 0!important

How To Resize Gallery Section for Mobile

Slideshow Thumbnails on Mobile Screens

Slideshow thumbnails appear in desktop mode but when you switch to mobile phone mode, the thumbnails disappear. How To Resize Gallery Section for Mobile

If you want to show the thumbnails on mobile screens too then copy the following code and paste it into custom CSS.

@media only screen and (max-width:767px) {
.gallery-slideshow-thumbnails {
display: inline!important

How To Resize Gallery Section for Mobile

  • After adding the CSS code, make sure to save your changes in the Squarespace Custom CSS editor.
  • To see how your gallery section looks on mobile, you should preview your website on a mobile device or use your browser’s responsive design mode to simulate different screen sizes. Make sure the gallery appears as you intended.
  •  Once you are satisfied with the changes, go back to your Squarespace editor and click the “Save” button. This will publish your changes to your live website.

Remember that CSS modifications can affect the overall appearance of your website, so it’s important to test thoroughly and ensure that the changes are consistent with your site’s design. Additionally, Squarespace’s interface may evolve, so the exact steps and options might change slightly, but the general process should remain similar.


In conclusion, resizing the gallery section for mobile in Squarespace is a crucial step in ensuring that our website is accessible and visually engaging across all devices. This approach enhances usability and underscores our commitment to providing a well-crafted and accessible website, ultimately leaving a positive impression on our audience, regardless of the device they use to access our content.


What size is a mobile view on Squarespace?

The mobile breakpoint has a max width of 640px. This means that any code you add for mobile view will only apply to screens that are 640px wide or less. Meanwhile, the tablet screen width ranges from 641px to 949px.

Why does my Squarespace site look bad on mobile?

All Squarespace sites are designed to look great on mobile devices from the start. However, additions you make, like large media files, lots of content on a page, and narrow letter spacing, can cause issues with site loading and mobile display.

Can you edit Squarespace just on mobile?

With the Squarespace app, you can edit your site from a mobile device. The app is great for Updating pages when you’re away from your computer. Adding new images to galleries and blocks directly from your device.

What is mobile breakpoint Squarespace?

A mobile breakpoint is the width (in pixels) at which the website changes to fit smaller screen sizes.

Does Squarespace have a mobile view?

Most Squarespace templates have a unique design optimized for mobile devices, which helps your visitors view and navigate your site from any device. Some templates have an option to disable this feature if you prefer, though we recommend keeping the mobile styles enabled.