Jump to content

stacking images for pc, tablet and mobile

Recommended Posts

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

Hi again. Could anyone help with this issue for me. On my website I have on homepage 4 inline images which look great on desktop, but not that great on tablet or mobile. I'd like if possible to use media queries to get them to form a 2x2 grid on tablet. At the moment when you resize the browser it goes straight from a 1 x 4 grid to images stacked on top of each other. 

Appreciate you clever people taking the time to look at this!

https://www.belmontaccommodates.com/

Thanks

Steve

Link to comment
  • Replies 2
  • Views 297
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

I've sort of come up with some css that works, but not brilliantly. Can anyone make this work better? Would really appreciate the advice.  Would be useful to know what width the breakpoint is in 7.1 for mobile. 

Thanks everyone!

@media only screen and (min-width: 700px) and (max-width: 1000px) {
.col.sqs-col-3.span-3
{
  width:50% !important;  
  }
}

@media only screen  and (max-width: 700px) {
.sqs-block-image {
width: 85%;
margin: 0 auto;
}
}

Link to comment

Add to Design > Custom CSS

/* Images on mobile - tablet */
@media screen and (max-width:991px) {
div#page-section-6217c7fb22a2d728c33ac28e .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-section-6217c7fb22a2d728c33ac28e .span-3:nth-child(2n+1) {
    clear: left !important;
}
}

 

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.