What are you trying to accomplish? Please describe.
I'm adding media queries to improve the display of desktop content and noticed that at a 1025px viewport the mobile content is still displayed, but the large breakpoint in style.json is defined as 64rem (1024px). Changing this value appears to have no effect on header.desktop / header.mobile.
So, my questions are:
How do I go about changing the breakpoint for desktop?
Why is there a disconnect between the JS and the css with regard to where a desktop breakpoint is?
What have you tried so far?
I've spent quite some time adjusting the CSS media queries (between using min-width/max-width, etc.) and search throughout the vtex github repos for where a value of 1025 or 1026 might be getting defined to no avail.
I've tested this on several browsers and had teammates do the same with a consistent behavior of not being able to change the value or getting the breakpoint to match all the css from vtex.store.
What are you trying to accomplish? Please describe.
I'm adding media queries to improve the display of desktop content and noticed that at a 1025px viewport the mobile content is still displayed, but the large breakpoint in
style.jsonis defined as 64rem (1024px). Changing this value appears to have no effect onheader.desktop/header.mobile.So, my questions are:
What have you tried so far?
I've spent quite some time adjusting the CSS media queries (between using min-width/max-width, etc.) and search throughout the vtex github repos for where a value of 1025 or 1026 might be getting defined to no avail.
I've tested this on several browsers and had teammates do the same with a consistent behavior of not being able to change the value or getting the breakpoint to match all the css from vtex.store.
Thanks.
Additional info
syattrenwil