Jump to content

Side by side code blocks on mobile

Recommended Posts

Hi Community,

I am trying to have side by side code blocks (2 per row) on mobile. 

I currently have 8 code blocks displaying as 2 rows of 4 on desktop. When switching to mobile view, these blocks stack on top of each other so that it displays as 1 block per row. I have tried targeting various elements like the content wrapper and .sqs-col-12 .sqs-col-4 columns like this to no avail:

@media screen and (max-width: 640px){ [data-section-id=""]{.sqs-col-12 .sqs-col-4{
  width: calc(100%/2) !important;
  border: 0 !important;
  margin: 0 !important;
  }
  }
}

Any help would be greatly appreciated!

Link to comment
  • 5 weeks later...

@New-At-This How did you solve this? 

Edited by TempusInfernus

I'm more of a designer than a developer, but I know some HTML, CSS, and Javascript, and PHP, but I would not describe myself as good at any of them. I know just enough to get things to work the way I want with a little help sometimes, even if it takes hours and hours of burning time.

Link to comment

This is driving me CRAZY. I just want two little icons side by side in the footer that don't become HUGE on mobile. How damn hard does this have to be? 

I'm more of a designer than a developer, but I know some HTML, CSS, and Javascript, and PHP, but I would not describe myself as good at any of them. I know just enough to get things to work the way I want with a little help sometimes, even if it takes hours and hours of burning time.

Link to comment
4 hours ago, TempusInfernus said:

This is driving me CRAZY. I just want two little icons side by side in the footer that don't become HUGE on mobile. How damn hard does this have to be? 

If you share link to your site, we can check easier.

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

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.