Jump to content

How. To Center Align. My Gallery Column Main Page In Mobile With CSS

Go to solution Solved by Ziggy,

Recommended Posts

Noticed that on the main page in my mobile view, the column is not centered. I used the following CSS code to make two columns into one.

@media (max-width: 800px) {
    .gallery-masonry .gallery-masonry-item img {
        height: 100%!important;
        width: 100%!important;
    }
    .gallery-masonry .gallery-masonry-wrapper {
        columns: 1;
        column-gap: 0;
        padding: 10 10px;
        height: auto!important;
        display: block!important;
     }
    .gallery-masonry-item-wrapper {
        height: auto!important;
    }
    .gallery-masonry-item {
        position: relative!important;
        padding: 10px!important;
        transform: none!important;
        width: 100%!important;
        display: block;
       }
}

 

Here is a picture and link to my website. 

https://www.erinncapko.com/

Screen Shot 2023-08-24 at 10.15.27 PM.png

Link to comment
  • Solution

This padding highlighted yellow is causing the problem:

image.thumb.png.9ed3abd42e7fd2ffb8882c6ec38cc029.png

Replace your code with this, I've swapped all padding to just bottom padding:

@media (max-width: 800px) {
    .gallery-masonry .gallery-masonry-item img {
        height: 100%!important;
        width: 100%!important;
    }
    .gallery-masonry .gallery-masonry-wrapper {
        columns: 1;
        column-gap: 0;
        padding: 10 10px;
        height: auto!important;
        display: block!important;
     }
    .gallery-masonry-item-wrapper {
        height: auto!important;
    }
    .gallery-masonry-item {
        position: relative!important;
        padding-bottom: 10px!important;
        transform: none!important;
        width: 100%!important;
        display: block;
       }
}

Hope that helps.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
10 hours ago, Ziggy said:

This padding highlighted yellow is causing the problem:

image.thumb.png.9ed3abd42e7fd2ffb8882c6ec38cc029.png

Replace your code with this, I've swapped all padding to just bottom padding:

@media (max-width: 800px) {
    .gallery-masonry .gallery-masonry-item img {
        height: 100%!important;
        width: 100%!important;
    }
    .gallery-masonry .gallery-masonry-wrapper {
        columns: 1;
        column-gap: 0;
        padding: 10 10px;
        height: auto!important;
        display: block!important;
     }
    .gallery-masonry-item-wrapper {
        height: auto!important;
    }
    .gallery-masonry-item {
        position: relative!important;
        padding-bottom: 10px!important;
        transform: none!important;
        width: 100%!important;
        display: block;
       }
}

Hope that helps.

Yes it does! Thank you very much! 

Link to comment
3 hours ago, ec25 said:

Yes it does! Thank you very much! 

Great, happy to help!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.