Jump to content

RESIZE MOBILE TITLES AND MAKE 1 COLUMN ON MOBILE VIEW for Gallery Simple Grid!

Recommended Posts

Hello, 

I found this code to manipulate the titles on my GALLERY SIMPLE GRID mobile view as well as have the view create 1 column instead of two on mobile, however it doesn't seem to work.  PLEASE HELP!  

site:  https://bear-pufferfish-gsl3.squarespace.com/config/pages/website-tools/custom-css

Password- IRIS

CODE

@media (max-width: 640px) {
  .gallery-grid .gallery-caption-content {
    font-size: 14px !important;
  }
  .gallery-grid .gallery-grid-wrapper {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}

Thank you so much for your help! Natalee

Screen Shot 2024-05-16 at 9.10.31 AM.png

Link to comment
  • Replies 6
  • Views 83
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Try changing to this code:

@media only screen and (max-width: 768px) {
  .gallery-grid .gallery-caption-content {
    font-size: 14px !important;
  }
  .gallery-grid .gallery-grid-wrapper {
    grid-template-columns: 1fr !important;
  }
}

 

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Hey @Ziggy  When I used that code - it made it one column on both desktop and mobile. Anyway to achieve the following?

1- Any way to just have it one column on mobile only?  My client wants two columns on desktop. 

2- The opacity doesn't go all the way to the right with this code. Anyway to make that go 100%?

3- Anyway to manipulate the mobile version titles only?  If I want to make the font smaller?

Please see attached images.  THANK YOU FOR HELPING ME!!

Screen Shot 2024-05-16 at 9.43.09 AM.png

Screen Shot 2024-05-16 at 9.43.16 AM.png

Link to comment

That code snippet affects only up to 768px wide which is a tablet screen not desktop (unless you have a tiny desktop screen). I don't know how you have the overlay set.

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

@Ziggy  This is the code I have on this site:

}
    .header-nav-folder-item a:hover { background: #e9efe5}
/* Grid Gallery Captions on Hover */
.gallery-grid .gallery-caption
{
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.5); // overlay color 
  height: 100%;
  padding: 0;
  opacity: 0;
   transition: all .1s ease;
  pointer-events: none;
}
.gallery-grid .gallery-caption-wrapper {
  display: flex;
  align-items: center; // center caption box vertically 
  justify-content: center; // center caption box horizontally
}
.gallery-grid .gallery-caption-content {
  font-size: 18px !important; // caption font size
  font-weight: 200 ! important;// caption font weight
  color: white; //caption font color 
  padding: 2vw; // padding around the caption
  text-align: center; // center text within caption box
}
.gallery-grid-item {
  position: relative;
}
.gallery-grid-item:hover .gallery-caption {opacity: 2;}
  

Link to comment

@Ziggy And this is the Lightbox Code Injection.

 

<!-- Plugin Lightbox -->
<link href="/s/plugin-lightbox.css" rel="stylesheet">
<script src="/s/plugin-lightbox.js"></script>
<script>pluginLightbox();</script>
<!-- end Plugin Lightbox -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){

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.