Landkit update 1.10 turns code block into Chinese characters. See fix here

  Public Ticket #1850101
Can't hide elements on "ipad" 768x1024


  •  5
    theambertheatre started the conversation


    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.

  •  383
    Gabriel replied

    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.

  •  5
    theambertheatre replied

    Hi Gabriel,

    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

  •  383
    Gabriel replied

    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

  •  5
    theambertheatre replied

    I see,

    Thanks that fixed it