Jump to content

Trouble adjusting number of blocks and size for mobile/tablet views

Recommended Posts

Site URL: https://www.ccaknights.com/staff

Created this staff page on our site (https://www.ccaknights.com/staff) using the "Stack Image Layout" not the Gallery, and while it looks fine in desktop it's awful in tablet and single image in mobile. Which makes for an almost infinite scroll on mobile. I've read so many tutorials and how-to's for CSS, and I can't seem to find the right element class or combination thereof to get what I want.

What I'd like to end up with is perhaps two side by side on mobile and maybe four on tablet. Besides that, if it's possible to additionally resize the text that is in the block with the image so it doesn't wrap in an unpleasant way, like it currently does on tablet. Your assistance is greatly appreciated.

Link to comment
  • Replies 2
  • Views 447
  • Created
  • Last Reply
On 3/10/2021 at 10:40 AM, gambroselli said:

Site URL: https://www.ccaknights.com/staff

Created this staff page on our site (https://www.ccaknights.com/staff) using the "Stack Image Layout" not the Gallery, and while it looks fine in desktop it's awful in tablet and single image in mobile. Which makes for an almost infinite scroll on mobile. I've read so many tutorials and how-to's for CSS, and I can't seem to find the right element class or combination thereof to get what I want.

What I'd like to end up with is perhaps two side by side on mobile and maybe four on tablet. Besides that, if it's possible to additionally resize the text that is in the block with the image so it doesn't wrap in an unpleasant way, like it currently does on tablet. Your assistance is greatly appreciated.

@tuanphan My question has received no response in a few days and I saw you answer a similar question in another thread, I hoped I could trouble you for some assistance. From what I saw in other threads you are a wizard. Thank you in advance for any assistance, if you cannot assist I understand.

Greg

Link to comment
  • 2 weeks later...
On 3/13/2021 at 1:06 AM, gambroselli said:

@tuanphan My question has received no response in a few days and I saw you answer a similar question in another thread, I hoped I could trouble you for some assistance. From what I saw in other threads you are a wizard. Thank you in advance for any assistance, if you cannot assist I understand.

Greg

Hi. Sorry. I'm overloaded. Add this to Design > Custom CSS

/* tablet */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-6025a6968c871151759dca90 .span-2 {
    width: 33.33% !important;
    float: left !important;
}
div#page-6025a6968c871151759dca90 .span-2:nth-child(3n+1) {
    clear: left !important;
}
}
/* mobile */
@media screen and (max-width:767px) {
div#page-6025a6968c871151759dca90 .span-2 {
    width: 50% !important;
    float: left !important;
}
div#page-6025a6968c871151759dca90 .span-2: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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.