Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • August 8, 2018 at 5:59 pm #995094
    fla_dechen

    Hello guys,
    I’ve been playing around with columns custom top and bottom margins until I built an interesting layout for the main page of my website. Product images are overlapping and that looks really good!

    However, when I added CSS to remove the custom top and bottom margins on mobile devices, it didn’t work. I tried adding !important but nothing happens. Curiously, the padding property works just fine. Here’s the code:

    @media only screen and (max-width:767px) {
  #top .nomargin {
        margin-top: 0px; margin-bottom: 0px; padding: 0px !important;
    }
}

    I added a custom CSS class “nomargin” to all the elements that use custom top and bottom margins, as you can see. I don’t know what I’m doing wrong.
    Can you help me?
    Thanks in advance

    • This topic was modified 6 years, 3 months ago by fla_dechen.
    August 8, 2018 at 8:18 pm #995133
    fla_dechen

    Guys, I found a workaround and, for now, it will work for me. Still it looks a little wonky.
    I added the following code:

    @media only screen and (max-width:767px) {
     #top .flex_column_table.av-equal-height-column-flextable {
          margin-top: 0px !important;
          margin-bottom: 0px !important;
          padding: 0px !important;
     }
}

    I wish I had a more elegant solution.
    Any ideas?

    August 9, 2018 at 2:29 pm #995484
    Victoria

    Hi fla_dechen,

    Could you please attach some screenshots of the issue?

    Which elements do you need help with?

    Best regards,
    Victoria

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