Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • April 15, 2019 at 3:02 am #1090805
    ilonka78

    Hi
    Is it possible to remove space between columns on mobile view? Looks great on PC but when view on mobile, columns are one above another and there is big space between them. I tried this code from another topic and experimented with margins but it doesn’t change anything.

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

    April 15, 2019 at 4:30 am #1090819
    Mike

    Hey ilonka78,
    When I take a look at your site it looks like your css is working, I don’t see any extra space between your sections. I do see some overlap, so you may want to adjust again. Please see the screenshot in Private Content area.
    Please try clearing your browser cache.

    Best regards,
    Mike

    April 16, 2019 at 5:37 am #1091209
    ilonka78

    Hi
    I can still see the space on mobile. I have attached screen shots. I cleared cache on my phone and I use Safari. Thank you

    April 16, 2019 at 7:31 pm #1091641
    Victoria

    Hi ilonka78,

    Best regards,
    Victoria

    April 17, 2019 at 2:57 am #1091727
    ilonka78

    Hi
    That’s weird. Maybe we are using different browsers on mobile. I removed

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

    Thank you

    April 17, 2019 at 11:30 am #1091924
    Nikko

    Hi ilonka78,

    Try adding this css code in Quick CSS:

    @media only screen and (max-width: 767px) { 
  #top.page-id-867 #after_section_1 .flex_column.av_one_third.avia-builder-el-8,
  #top.page-id-867 #after_section_1 .flex_column.av_one_third.avia-builder-el-8 p {
    margin-bottom: 0;
  }

  #top.page-id-867 #after_section_1 .flex_column.av_one_third.avia-builder-el-10 p {
    margin-top: 0;
  }
}

    Best regards,
    Nikko

    April 18, 2019 at 5:12 am #1092253
    ilonka78

    Hi
    It works perfectly on “Services” page but there is still space on “Service area” page.
    I tried to copy that css one more time and use new page id 982 but that didn’t work.

    Thank you

    April 18, 2019 at 5:52 am #1092265
    Mike

    Hi,
    Please also try this css:

    @media only screen and (max-width: 767px) { 
  #top.page-id-982 #after_section_1 .flex_column.av_one_fifth.avia-builder-el-2,#top.page-id-982 #after_section_1 .flex_column.av_one_fifth.avia-builder-el-2 p:last-child {
    margin-bottom: 0 !important; 
  }
}

    Best regards,
    Mike

    April 24, 2019 at 2:32 am #1093787
    ilonka78

    That worked! Thank you so much.

    April 24, 2019 at 2:39 am #1093792
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Remove space between columns on mobile view’ is closed to new replies.