Gallery image resizing for mobile

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

Hi, I have three images in a gallery block, however, I don't like the way it displays in mobile (see screenshots below). Is there a way to either stack them or shrink them so they all fit? Password is Patricia. Thanks!! 

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;
}
}

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?

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?

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

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?

3 hours ago, tuanphan said:

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

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. 

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. 

 

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

17 hours ago, tuanphan said:

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

Ok it is saved. 

On 11/29/2021 at 7:36 AM, JennWalker said:

Ok it is saved. 

It see it worked here?

On 11/30/2021 at 4:10 AM, tuanphan said:

It see it worked here?

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

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?

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;
}
}

8 hours ago, tuanphan said:

Do you still need help with Retreats page?

Actually some changes were made and I am having the issue with 3 pages, about, experiences, and retreats!

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;
}
}

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!! 

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!! 

 

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>

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!

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)