Jump to content

Descrease mobile breakpoint for header

Recommended Posts

Site URL: https://www.yumartialarts.com/

I would like to have the mobile header show up only on phones on this site https://www.yumartialarts.com/.  The desktop header looks better on tablets.  I have tried changing the max-width to 640px in the CSS but it only halfway works.  There is a weird space between 640 and 799 and I can't seem to find all of the pieces.  

If I go to the CSS for the site and look, I can see all of these different options for mobile.  If I start to change them I get this like the logo on left, two logos, no logo or menu between 640 or 799.  It is like there are two many things.  I thought setting the breakpoint for .header-display-desktop and .header-display-mobile would override the other items in those divs.  Has anyone had any luck with this?  How did you do it?


@media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width:  799px ){.header-display-mobile{display:flex}}.header-display-mobile .showOnDesktop{display:flex}

@media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width:  799px ){.header-display-mobile .showOnDesktop{display:none}}.header-display-desktop{position:relative;display:flex;width:100%;box-sizing:border-box;justify-content:flex-start;align-items:center}

@media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width:  799px ){.header-display-desktop{display:none}}.header-display-desktop .showOnMobile{display:none}

@media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width:  799px ){.header-display-desktop .showOnMobile{display:flex}}.header-title-nav-wrapper{display:flex;flex-wrap:nowrap;flex:1 0 67%;align-items:center}.header-title{flex-grow:0;flex-shrink:0;backface-visibility:hidden}

 

image.thumb.png.bc5eb97aa658b53be91db8629af6ffbe.pngimage.thumb.png.ce3315ff5d0ec8df207b01b70fc2b7d1.png

Link to comment
  • Replies 1
  • Views 256
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.