Optimizing custom code blocks for Tablets....

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!
 

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

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.

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%;
}
}