Jump to content

Optimizing custom code blocks for Tablets....

Recommended Posts

Hi,

I have designed a homepage where I have:

carousel (sqs-col-6) | Column of four Buttons using code-blocks (sqs-col-3) | Column of four Buttons using code-blocks (sqs-col-3)

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 carousal. Any help or advice would be greatly appreciated. thank you!

Link to comment
  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

Unfortunately I can't send the link as the page is set to private as it's in development. I have attached images of the home page. 

for the tablet version i have used the following code....

 [data-section-id="60a633de1a74bd0fe53f79e1"] {
      @media screen and (max-width: 1366px) and (min-width: 768px ) {
    .sqs-row {display: flex; flex-direction: column;}
             
    .summary-v2-block {width:515px!important;}
        .code-block {width: 270px;
       padding: none;
          margin-top: none;
        display: inline-block;
      }
        .sws-col-3 {display: inline-flex!important;} 
      }
}

Most of that code is me trying different things to try and make it work. What i am trying to do is to make the 8 code blocks which sit nicely to the right of the carousel to fall underneath in two columns on tablet.

Picture1 Desktop.png

Picture2 tablet (2).png

Link to comment
  • 4 weeks later...
On 6/16/2021 at 10:06 AM, tuanphan said:

Yes. You can send me via private message or email

I wondered if I could use your help once more... The front page changed slightly. So instead of Col-span-6 and Col-span-3 it is now all col-span-4. Any help you could give is greatly appreciated.

 

 

Link to comment
On 7/9/2021 at 1:51 AM, CPharmacyScot said:

I wondered if I could use your help once more... The front page changed slightly. So instead of Col-span-6 and Col-span-3 it is now all col-span-4. Any help you could give is greatly appreciated.

 

 

What is site access password?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
  • 5 weeks later...

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.