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

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


gambroselli

Question

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.

Edited by gambroselli
add tags
Link to comment
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

2 answers to this question

Recommended Posts

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

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