Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

3 column gallery display on mobile


Musil

Question

Posted (edited)

Site URL: https://lavender-caribou-csa2.squarespace.com/miami

Hello,

I have been attempting to have three images display on the mobile gallery grid as pictured on the top, but it's currently only displaying two at a time and staggering the third. (As pictured bellow.)

597184204_Screenshot(13).png.2c98d52fd0596930e805459200952f8b.png

I've used this CSS, but it's not working as intended, it's making the longer banners display at  a third of their size.

Quote

 

@media screen and (max-width:767px) {
.gallery-grid-wrapper {

grid-template-columns: repeat (3,1fr) !important;
  }}

 

TET.png.a7571ec4afff6404185df4a386ae7187.png

Also is there a way to reduce the spacing between a text block, an image block and a gallery block on mobile? The padding is too much.

Thanks in advance!

Edited by Musil
Link to comment
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

3 answers to this question

Recommended Posts

  • 0

#1. Where? I scroll down whole page & Don't see it

#2. Add to Design > Custom CSS

@media screen and (max-width:767px) {
.gallery-grid.gallery-grid--layout-grid {
    padding-top: 1vw;
    padding-bottom: 1vw;
}
div#block-yui_3_17_2_1_1651764082623_5918 {
    padding-top: 1vw !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
  • 0
On 6/10/2022 at 1:14 AM, Musil said:

Hello! And thank you for the help!

I have some further issues that need a little help.  I'm having some issues with reducing the padding around a captioned image. 

This issue is most obvious on the mobile version 

https://lavender-caribou-csa2.squarespace.com/press

Thank you!

Screenshot (18).png

Screenshot (20).png

Use this code

/* Mobile Image padding */
@media screen and (max-width:767px) {
div#page-section-60da3925c5eb7852a11d466a .image-block {
    padding-left: 5px !important;
    padding-right: 5px !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

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...