Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 7, 2018 at 9:02 pm #894490
    GriffinGraffix

    Hi!

    On home I have the 3 icon boxes in 3 columns that I have set with a top margin of -200px. That’s great until I reach more or less the 1720px width.
    Then they are over a slider image on smaller screens. I am trying to set a different top margin for screens that are smaller. This is what I did: I also added a class “home-boxes-mobile” to my first column.

    @media only screen and (max-width: 1720px){
.-flextable  .home-boxes-mobile { margin-top: 40px !important; margin-bottom: 30px !important; }
}

    This code only works if the max-width I set is the same as the breaking point settings for the box (ie 989px), otherwise, it doesn’t work at all.
    All I want to do is have the 3 columns a bit lower when screen is less than say 1720px.

    Thanks for the help!
    Sorry I can’t link to site seeing as it’s no online yet.

    January 8, 2018 at 6:22 am #894603
    Rikard

    Hey GriffinGraffix,

    It’s difficult to help you out if we can’t actually see the elements in question, did you try inspecting them in your browser to see which CSS is applying to them?

    Best regards,
    Rikard

    January 8, 2018 at 6:43 am #894609
    GriffinGraffix

    Does this help?
    3 column icon box margin change for smaller screen

    http://purrproject.com/issues/icon-boxes-top-margin-for-small-screen.jpg

    January 9, 2018 at 12:23 am #895000
    Basilis

    Hi,

    I am sorry, we would need the link, so feel free to send it over when you have the site live and we will be able to help further.

    Best regards,
    Basilis

    January 9, 2018 at 2:40 am #895049
    GriffinGraffix

    Ok will do! Thanks!

    January 9, 2018 at 7:32 am #895124
    Rikard

    Hi,

    Thanks for the feedback, just let us know when you have something we can look at :-)

    Best regards,
    Rikard

    January 12, 2018 at 12:34 am #896329
    GriffinGraffix

    Here’s the link

    PuRR Project – No-Kill Feline Rescue Shelter – Puerto Vallarta

    Thanks!

    January 16, 2018 at 12:08 am #897757
    Ismael

    Hi,

    The margin is applied to the flex_table container, not to the columns so the previous selector would not work. The following css code should work but you have to apply a unique Section ID to the color section containing the columns so that you can replace the generic selector (#av_section_1).

    @media only screen and (max-width: 1720px){
    #av_section_1 .flex_column_table {
        margin-top: -100px !important;
    }
}

    Best regards,
    Ismael

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