Jump to content

Keeping Tabs on Two Lines on all desktop sizes - flex basis

Recommended Posts

Site URL: https://thisisdoer.com/digital

Heyo!

site: thisisdoer.com/digital

I have some tabs on my site that currently stack on two lines. This on my external monitor that is 27 inches. This is the ideal state until the tablet breakpoint.

1162254131_ScreenShot2021-06-02at1_21_20PM.thumb.png.c0379a21bc11c471f887567789441abd.png

When the screen resizes to a smaller resolution on a desktop (say a 15inch screen), they break into three lines and become a bit incoherent. 

2089604782_ScreenShot2021-06-02at1_21_37PM.thumb.png.5b5436addd97f04da48e6e2f95da8c62.png

I've attempted to use flex-basis to make them remain consistently stay on two lines instead of breaking into three. but have not been able to do so.

On tablets and mobile they behave how I'd hoped so I'm not sure what I have bungled.

277222272_ScreenShot2021-06-02at1_22_51PM.thumb.png.80cf7d2fb6cd5b75f01f9f60878c2f17.png

165335580_ScreenShot2021-06-02at1_23_30PM.thumb.png.4bba77571a10d04761e0c67c39d0cfd7.png

Any insight would be really great if you have any! 

Link to comment
  • Replies 2
  • Views 196
  • Created
  • Last Reply

Try this

/* Our process */
@media screen and (max-width:1350px) {
.sqpl-tab-controls {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
}
.sqpl-tab-controls>div {
    width: 50%;
    padding-left: 0;
    padding-right: 0;
}}

 

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

Archived

This topic is now archived and is closed to further replies.

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