Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 2, 2018 at 2:11 am #906563
    volmering

    hey there,

    i got a little problem with a webpage based on the enfold-freelancer demo.

    i checked some grid elements with “hide on mobile”.

    but its still on tablets portait view visible. i played a little bit with the breaking point, but nothing helps.

    logindata see below

    would be great to know a css snippet how to change the mobile “breakpoint” and “hide on mobile” manually in my custom css. cause the only thing u can change in the theme is between 768 and 989 px.

    February 2, 2018 at 3:38 am #906580
    John Torvik

    Hey volmering,

    Please, tell us which element do you want to hide on mobile devices, but you can hide it using a custom CSS code like that:

      @media only screen and (max-width: 769px) {
    ElementClass or ElementID {
        display: none !important;
    }
}

    Best regards,
    John Torvik

    February 2, 2018 at 3:40 am #906581
    volmering

    hey john,

    thx for your answer.

    did u see the tablet version? then u know exactly what element i mean.

    February 2, 2018 at 5:53 am #906625
    Mike

    Hi,
    I believe you are talking about this element:

    #top.home .avia-builder-el-30 {display:none!important;}

    Try this code in the General Styling > Quick CSS field

    Best regards,
    Mike

    February 2, 2018 at 6:15 am #906634
    volmering

    hi, thx for trying to help.

    but i know how to use display none. :-)

    i need a solution or a reason why this happens. i try to explain it a bit better :-)

    this layout is bsed on several gridrows (2 colums)

    when i switch the break point (in the grid-setting) from 767 px (in screen options) to 989 px – the 2. row in the grid is visible again. but in the setting of this row is still set on “hide on mobile”

    is it my fault or a bug in the theme?

    btw. its a need to look in the backend

    February 2, 2018 at 7:58 pm #906985
    Mike

    Hi,
    The reason is:
    The hide on mobile option is set in the layout.css on line 4080 to “@media only screen and (max-width: 767px)”
    within the following group of rules, line 4105, contains “.responsive #top .av-hide-on-mobile {display:none !important;}”

    The solution is to modify layout.css or use a custom display:none.
    The reason is this already has the !important; in it so you would need to remove this line and any other lines with .av-hide-on-mobile to set to your own width, and then add the layout.css to your child theme.
    Hope this helps

    Best regards,
    Mike

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.