Jump to content

Gallery image resizing for mobile

Recommended Posts

  • Replies 18
  • Created
  • Last Reply

Top Posters In This Topic

Add to Design > Custom CSS

/* Mobile-Work With me Gallery */
@media screen and (max-width:767px) {
[data-section-id="618d300352db333cfbccd4ad"] .gallery-grid-wrapper {
    grid-template-columns: repeat(3,1fr) !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 11/14/2021 at 11:49 PM, tuanphan said:

Add to Design > Custom CSS

/* Mobile-Work With me Gallery */
@media screen and (max-width:767px) {
[data-section-id="618d300352db333cfbccd4ad"] .gallery-grid-wrapper {
    grid-template-columns: repeat(3,1fr) !important;
}
}

 

Thank you, however this didn't do anything for me. Any suggestions?

Link to comment
On 11/22/2021 at 3:13 AM, JennWalker said:

Thank you, however this didn't do anything for me. Any suggestions?

I remember this section was in homepage in 14 Nov. Now i don't see it.

Can you share link to page where you added gallery?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 11/14/2021 at 11:49 PM, tuanphan said:

Add to Design > Custom CSS

/* Mobile-Work With me Gallery */
@media screen and (max-width:767px) {
[data-section-id="618d300352db333cfbccd4ad"] .gallery-grid-wrapper {
    grid-template-columns: repeat(3,1fr) !important;
}
}

 

They are on this page - https://www.patricialindner.com/transform and this page and this page https://www.patricialindner.com/retreats, password is Patricia

Link to comment
On 11/24/2021 at 4:47 AM, JennWalker said:

They are on this page - https://www.patricialindner.com/transform and this page and this page https://www.patricialindner.com/retreats, password is Patricia

The code worked on Transform page. Can you check again?

image.thumb.png.d7c2935b122d87b4190b456b451dd22a.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 11/26/2021 at 8:46 PM, JennWalker said:

I am not sure what I am doing wrong but it is still not working for me. See screenshot below with the code in, in mobile view. 

image.thumb.png.2db02712975c58b3e6bf37f1683758fd.png

 

Can you add & keep the code in Custom CSS? We can check it easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 12/1/2021 at 8:47 PM, JennWalker said:

It seems to be working for me now, not sure why it wasn't changing before. Thanks so much! 

Do you still need help with Retreats page?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
7 hours ago, tuanphan said:

Do you still need help with Retreats page?

Yes I do. I used the below code but it doesn't seem to be working. 

/* Mobile-Work With me Gallery */
@media screen and (max-width:767px) {
section[data-section-id="619a9a83bca8064b380a7cc4"].gallery-grid-wrapper {
    grid-template-columns: repeat(3,1fr) !important;
}
}

 

Link to comment
On 12/4/2021 at 9:42 PM, JennWalker said:

Yes I do. I used the below code but it doesn't seem to be working. 

/* Mobile-Work With me Gallery */
@media screen and (max-width:767px) {
section[data-section-id="619a9a83bca8064b380a7cc4"].gallery-grid-wrapper {
    grid-template-columns: repeat(3,1fr) !important;
}
}

 

With retreat page, use this code (You need a space between sectionid & .gallery-grid-wrapper)

/* Mobile-Work With me Gallery */
@media screen and (max-width:767px) {
[data-section-id="619a9a83bca8064b380a7cc4"] .gallery-grid-wrapper {
    grid-template-columns: repeat(3,1fr) !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
8 hours ago, tuanphan said:

With retreat page, use this code (You need a space between sectionid & .gallery-grid-wrapper)

/* Mobile-Work With me Gallery */
@media screen and (max-width:767px) {
[data-section-id="619a9a83bca8064b380a7cc4"] .gallery-grid-wrapper {
    grid-template-columns: repeat(3,1fr) !important;
}
}

 

This is still not working for me. Code is in and see below. Let me know what might be happening, thanks!! 

image.thumb.png.de4e4cfb01ec18f1d85b976158880794.png

 

Link to comment
On 12/9/2021 at 12:20 AM, JennWalker said:

This is still not working for me. Code is in and see below. Let me know what might be happening, thanks!! 

image.thumb.png.de4e4cfb01ec18f1d85b976158880794.png

 

Try Edit Retreat Page >> Add a Code Block (above Working with Patricia...text) >> Then paste this code into Code Block

<style>
  /* Mobile-Work With me Gallery */
@media screen and (max-width:767px) {
[data-section-id="619a9a83bca8064b380a7cc4"] .gallery-grid-wrapper {
    grid-template-columns: repeat(3,1fr) !important;
}
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 12/11/2021 at 8:49 PM, tuanphan said:

Try Edit Retreat Page >> Add a Code Block (above Working with Patricia...text) >> Then paste this code into Code Block

<style>
  /* Mobile-Work With me Gallery */
@media screen and (max-width:767px) {
[data-section-id="619a9a83bca8064b380a7cc4"] .gallery-grid-wrapper {
    grid-template-columns: repeat(3,1fr) !important;
}
}
</style>

 

Thank you!

Link to comment
On 12/14/2021 at 12:04 AM, JennWalker said:

Thank you!

Just discovered tablet has same problem. In above code, you can change 767px to 1024px (1024px = Tablet + Mobile)

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.