Landkit update 1.10 turns code block into Chinese characters. See fix here
I'm having a problem where I have an image or element that should be hidden on a mobile phone (xs) and an image that should be hidden on an iPad or larger (md) but both are visible when viewing the site at iPad resolution (768x1024) in Chrome developer tools.
Hi, these are the values for breakpoints:
xs: max-width: 767px
sm: max-width: 992px
Use xs for phones and sm for ipads.
Image that has hidden-xs should be visible on ipads (it's just below 768).
Add hidden-sm for the other one and check again.
Thanks for the info.
I'm still having problems getting the two images to hide and show correclty on different devices.
I've included screen shots with my settings.
"Show on phones HIde on ipad and larger": This isn't showing on phones if I select "hidden sm" .
If I unselect "hidden sm" to make it show on phones, it will also show on the ipad, which it shouldn't.
I'm using Chrome developer tools to check breakpoints
Attached files: Show on phones HIde on ipad and larger.png Show on iPad and larger Hide on phones.png
All right, this is how it works: hidden-sm will hide the element on all resolutions below 992px, including phones.
To show on phone but hide on ipad, set visible-xs and hidden-sm
Thanks that fixed it