Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • January 2, 2019 at 5:58 pm #1049328
    hbourdillon

    Hi there and Happy New Year!
    I’d like to make the margins on the mobile and table views smaller because it looks a bit daft at the moment!
    I’ve tried working out the CSS code, but here I am as it didn’t work. Please can you help?
    Many thanks
    H

    January 3, 2019 at 5:41 am #1049475
    Ismael

    Hey hbourdillon,

    Thank you for using Enfold.

    Could you be more specific? Which margins are you trying to decrease? Please provide a screenshot using imgur or dropbox.

    Best regards,
    Ismael

    January 3, 2019 at 11:55 am #1049577
    hbourdillon

    Hi Ismael,
    Links to imgur below.
    Thanks
    H

    January 4, 2019 at 5:49 am #1049809
    Ismael

    Hi,

    Thanks for the update. You can use this css code to remove the columns’ inline padding:

    @media only screen and (max-width: 767px) {
.responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin {
    padding: 0 !important;
}
}

    Best regards,
    Ismael

    January 7, 2019 at 3:31 pm #1050913
    hbourdillon

    Hi Ismael,
    That works great, thank you.
    On the mobile view (small screens not table) the social media buttons under “Follow Me” are vertically arranged rather than horizontal as they are on all other screens. please see attached image.
    Is it possible to have some code that will make arrange them horizontally on mobile screens please?
    Many thanks
    H

    January 8, 2019 at 3:44 am #1051149
    Ismael

    Hi,

    Enable the the custom css class field so that you can target the social icons or the columns containing them:

    // https://kriesi.at/documentation/enfold/intro-to-layout-builder/#turn-on-custom-css-class-field-for-all-alb-elements

    Edit the first column in the row, set the “Equal Height Columns” to the first option and add a unique class attribute to the social icon columns. You can then use that selector or class attribute to adjust the width of the columns on mobile view. Example:

    .social-columns {
   width: 31%;
   float: left;
}

    Best regards,
    Ismael

    January 8, 2019 at 7:03 pm #1051465
    hbourdillon

    Hi Ismael,

    I have done as you suggested and changed the Column Custom CSS Class for the Icon Column to “social-columns”
    and added in the following:

    @media only screen and (min-width: 768px) {
    .social-columns {
    width: 20%;
    float: middle;
    }
    }

    to the quick CSS but it hasn’t made a difference on the mobile view. What am I doing wrong?
    Best wishes
    H

    January 9, 2019 at 5:02 pm #1051921
    Ismael

    Hi,

    Thanks for the update.

    I adjusted the css code a bit.

    @media only screen and (max-width: 768px) {
.responsive #top #wrap_all .flex_column.social-columns:nth-child(1), .responsive #top #wrap_all .flex_column.social-columns:nth-child(5) { display: none !important;
}

.responsive #top #wrap_all .flex_column.social-columns {
   width: 33.33%;
   float: left;
}
}

    Don’t forget to set the “Equal Height Columns” settings to the first option.

    Best regards,
    Ismael

    January 9, 2019 at 7:44 pm #1052061
    hbourdillon

    Hi Ismael,
    That’s perfect, thank you for all you help with this!
    Best wishes
    H

    January 9, 2019 at 9:42 pm #1052101
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Margins on Mobile and tables are too wide’ is closed to new replies.