betsymintontech

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}

I have the same question. The masonary layout is closest but there are some images that would just look better if they took up the whole column. I need the gallery section though since the lightbox and the ability to scroll through all the pictures after clicking on one is super important.