Jump to content

Optimizing custom code blocks for Tablets....

Recommended Posts

Site URL: https://www.cps.scot

I have designed a homepage where I have:
Summary grid (sqs-col-4) | Column of four Buttons using code-blocks (sqs-col-4) | Column of four Buttons using code-blocks (sqs-col-4)
When it get's to mobile, squarespace does an excellent job of optimizing this all that had to be done is touch up the margins using a media query.
The problem is that I can't find a way to optimise it for Tablets. I am hoping that I can place the two columns of code blocks to sit underneath the summary grid. Any help or advice would be greatly appreciated. thank you!
 

Link to comment

Hi CPharmacyScot,

I took a look at your website -- it looks nice by the way! You'll need to adjust the media queries for both mobile and tablet. You'll end up with 2 separate CSS queries. You'll need to decide the breakpoints, but mobile is almost always set as "640px" or below.

Another note, on my end all of the circle images in the rows are oval-shaped, I'm not sure is that was the intended look, but either way looks good!

Best,

Dan

 

Link to comment
12 hours ago, Wolfsilon said:

Hi CPharmacyScot,

I took a look at your website -- it looks nice by the way! You'll need to adjust the media queries for both mobile and tablet. You'll end up with 2 separate CSS queries. You'll need to decide the breakpoints, but mobile is almost always set as "640px" or below.

Another note, on my end all of the circle images in the rows are oval-shaped, I'm not sure is that was the intended look, but either way looks good!

Best,

Dan

 

Hi Dan... Thanks for your reply and kind words. Thank you for spotting the ovals, that was not intended.

The trouble I am having is that I can't seem to make the buttons fall underneath the summary block on tablet. or mobile. I have used used media queries but can't seem to move them. I wonder if I am targeting the correct element.

Link to comment
21 hours ago, CPharmacyScot said:

Hi Dan... Thanks for your reply and kind words. Thank you for spotting the ovals, that was not intended.

The trouble I am having is that I can't seem to make the buttons fall underneath the summary block on tablet. or mobile. I have used used media queries but can't seem to move them. I wonder if I am targeting the correct element.

Try adding to Design > Custom CSS

@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-612de5948f34f41bdf1f7f6d>.row:nth-child(2)>.span-4:first-child {
    width: 100%;
}
div#page-section-612de5948f34f41bdf1f7f6d>.row:nth-child(2)>.span-4:nth-child(n+2) {
	width: 50%;
}
}

 

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.