Jump to content

gallery grid:strips mobile row height adjustment

Recommended Posts

hello I am trying to get my mobile site to display my gallery grid:strips with a different "row height" than it is on my desktop site

i have the row height set to 500 for the desktop version so i get 3-4 images per row

i want to be able to adjust only the mobile row height to 250 so that i get 1-2 images per row

Screenshot2023-04-29at3_11_15PM.thumb.JPG.094d784ea737d0f0580e51330d6a9386.JPGScreenshot2023-04-29at3_10_07PM.thumb.JPG.c01642f3d664c6ffb43ed80f0cb37764.JPGScreenshot2023-04-29at3_11_43PM.thumb.JPG.78b0405af750774d78fd34daef4d5ec7.JPGScreenshot2023-04-29at3_11_37PM.thumb.JPG.72b2139a69c4b888dfacc734e4b272ce.JPG

any help is greatly appreciated 

Link to comment
  • Replies 5
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

  • 3 months later...

Hi @tuanphan, I was also looking to do something similar with the Grid: Strips Galleries on my site - to have different Row-Heights between the mobile and desktop versions, to customise the number of pictures that appear on each.

For example, on this page: https://www.josephjohnherbert.com/home/fishermen-of-negombo I'd like to have the row-height on the desktop version to be 475, whereas on mobile I'd like it to be 145.

I attempted a coding solution, but obviously it failed haha

// Test 
@media screen and (max-width: 640px) {
  section[data-section-id="643f28548712a303c89e35ca"] {
  row-height: 145;
  }
}  

Cheers 🙂
Joseph

Edited by joseph-john-herbert
Link to comment
On 8/29/2023 at 5:03 AM, joseph-john-herbert said:

Hi @tuanphan, I was also looking to do something similar with the Grid: Strips Galleries on my site - to have different Row-Heights between the mobile and desktop versions, to customise the number of pictures that appear on each.

For example, on this page: https://www.josephjohnherbert.com/home/fishermen-of-negombo I'd like to have the row-height on the desktop version to be 475, whereas on mobile I'd like it to be 145.

I attempted a coding solution, but obviously it failed haha

// Test 
@media screen and (max-width: 640px) {
  section[data-section-id="643f28548712a303c89e35ca"] {
  row-height: 145;
  }
}  

Cheers 🙂
Joseph

If you want to make it 2 or 3 columns, we can try checking the code, but to change row-height attribute, I don't think of any way.

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.