Tagged: 

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • December 13, 2013 at 9:19 pm #200083
    IndikatorDesign

    Hello everybody,

    1.
    you´re been using 2 queries in the custom.css in enfold, one for tablets and desktops @media only screen and (min-width: 768px) and one below for mobile advices.

    I need more flexibility to handle all our features on the different devices especially BuddyPress on Smartphones. So I see that you are using more Breakpoints inside Enfold. Is that right? Please can you give me a list of all the px-values from all of your Breakpoints?

    I found this values, are they right?

    @media only screen and (min-width: 1340px)
    @media only screen and (min-width: 1140px) and (max-width: 1339px)
    @media only screen and (min-width: 990px) and (max-width: 1139px)
    @media only screen and (max-width: 989px)
    @media only screen and (min-width: 768px) and (max-width: 989px)
    @media only screen and (min-width: 480px) and (max-width: 767px)
    @media only screen and (max-width: 479px)

    2.
    I think for a better performance I wanna deactivate Layerslider on Smartphones and change it just with a linked background-image. Is it enough to use “display:none” in the queries that LS is not load?
    Can I use next the “after” syntax with “content” to place the image or do you have a better solution without php and javascript?

    Or is it possible to change it just on mobile devices with Easy-Slider? So you can config both for example, as first Layerslider and below Easy-Slider and set display:none in the queries for the div of that one you don´t need? If you do it on this way, are both of them loading every time or is it enough to display:none to set it really off?

    Hope you guys have some tipps for me..

    Best regards

    December 15, 2013 at 4:35 am #200361
    Ismael

    Hey Bruno!

    1.) You can find all the Media Queries css on css > layout.css > #Media Queries section.

    2.) According to some forums display:none; elements are not in the render tree all, so they will perform better at face value. There is really no difference on performance between display:none and visibility:hidden – even if there is, for as little as 1 or 2 elements it will be completely negligible. They said that your main concern should be, as you say, whether you want the elements to remain within the document flow, in which case visibility is a better option as it maintains the box model of the element.

    Best regards,
    Ismael

    December 15, 2013 at 11:19 am #200387
    IndikatorDesign

    Hey Ismael,

    thank you very much for this info, also for the possibility to start the debug mode. That will give us a lot of more experience and possibilities with this awesome enfold..

    Thank you!

    Best regards,
    Bruno

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Media Queries, Take off Plugins on mobile devices’ is closed to new replies.