Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 29, 2018 at 9:37 am #979229
    Halloblauw

    Hi guys,

    My Enfold website is pretty much ready to launch. It looks great on desktop, but on mobile it’s totally messed up.
    I want to delete the wide padding around the content blocks,
    and I want all the content below each other (so not keeping the 2/5-3/5 layout).

    Help a girl out :-)

    June 29, 2018 at 9:57 am #979236
    Yigit

    Hey,

    I went to Enfold theme options and chose your frontpage and blog page. Then went to Enfold theme options > Layout Builder and checked “Show element options for developers” and then edited your columns and gave them custom CSS class and added following code to bottom of Quick CSS field 

    @media only screen and (max-width: 768px) {
.mobile-padding {
    padding: 20px 0 20px 0!important;
}}

    Please review your website :)

    Regards,
    Yigit

    June 29, 2018 at 10:28 am #979250
    Halloblauw

    Hey Yigit,

    That is much better already!
    A few more questions…
    The home page on mobile on shows a couple of the columns, some are half shown.
    How do I fix this?

    And how do I do the same thing you did for the home page for all the other pages?

    Thank you so much!

    July 2, 2018 at 2:45 pm #980099
    Nikko

    Hi Halloblauw,

    It’s only half shown because it’s set as a background image and since it doesn’t have any content and not enough height to show the whole image, only a portion of the image is shown, try adding this css code also in your Quick CSS:

    @media only screen and (max-width: 768px) {
  .home #av-layout-grid-3 .flex_cell.av_two_fifth.avia-builder-el-28 {
    min-height: 400px;
    background-size: auto 100% !important;
    background-position: center center !important;
  }
}

    Hope it helps :)

    Best regards,
    Nikko

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