Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • November 13, 2018 at 1:04 pm #1032990
    Kesselhut

    Hi all,

    i want to add a custom whitespace to a specific area of my page which I think has to be done with media queries.
    As a workaround I added 3 separators which will be shown on different screen sizes defined by the options enfold is offering.

    I need a custom whitespace area on the homepage above the three buttons ( See private Content for details)

    I need the these screen sizes to be more specific and different breakpoints.
    Adding a class doesn’t seem to work, or maybe I am doing something wrong.

    Any help will be appreciated.

    Greetings Henning

    November 14, 2018 at 5:30 am #1033331
    Rikard

    Hallo Henning,

    I think we will need some more information to be able to help you out, what exactly is not working concerning classes and which CSS are you using?

    Best regards,
    Rikard

    November 14, 2018 at 2:41 pm #1033510
    Kesselhut

    Hi RIkard,

    this is what I am trying to do:

    @media only screen
    and (min-device-width: 280px)
    and (max-device-width: 480px)
    and (orientation: portrait) {
    .sepv{
    height:50px !important;
    }}

    @media only screen
    and (min-device-width: 480px)
    and (max-device-width: 766px)
    {
    .sepv{
    height:250px !important;
    }}

    @media only screen
    and (min-device-width: 766px)
    and (max-device-width: 1366px)
    {.sepv{
    height:350px !important;
    }}

    @media only screen
    and (min-device-width: 1367px)
    and (max-device-width: 1920px)
    {.sepv{
    height:450px !important;
    }}

    @media only screen
    and (min-device-width: 1921px)
    {.sepv{
    height:500px !important;
    }}

    The values are for example usage, so not final.
    I added a Whitespace Separator with no height above the first of the three buttons and gave it the class “sepv”
    I try different viewport via firefox dev-tools but I see no change.

    Thanks for your help
    Henning

    Sorry, I referred to the wrong page, see private content for update

    November 15, 2018 at 8:01 am #1033813
    Rikard

    Hi,

    Thanks for that, I see your class added but I can’t see the CSS applying. Where exactly are you adding your CSS? Please try to turn off file compression under Enfold->Performance as well and select to delete the old CSS and JS files at the same time.

    Best regards,
    Rikard

    November 19, 2018 at 6:40 pm #1035260
    Kesselhut

    Hi RIkard,

    sorry for the late reply.
    Topic can be closed, as I found a good workaround.

    Didn’t used the whitespace at all. I adjusted the the padding of the surrounding element with media queries and it works.

    Thanks

    November 20, 2018 at 12:38 pm #1035558
    Rikard

    Hi,

    Great, glad you found a solution and thanks for the update. I’ll close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Whitespace with media queries’ is closed to new replies.