Tagged: 

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • September 5, 2017 at 9:25 pm #848331
    DynamicsOnline

    Urgent. See site link below. All of the text areas on this site have extra padding added, within the layout builder, under the Layout tab of the Edit Column interface. However, when this site gets to mobile widths, the padding is much too much. I have been trying, unsuccessfully, to add custom css for mobile widths of these areas, in order to shrink the column padding.

    I’ve added
    add_theme_support(‘avia_template_builder_custom_css’);
    to the functions.php file, as I did read about this on your forum. So, I do now have the “Custom Css Class” field under Edit Column. I’ve added a custom name, in this case –
    dlc-pad-mobile

    I then added the following to my Custom css window

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

    This does not work. The margins still remain at 0px 120px 50px 109px, which is what they are set as in the Edit Column interface.

    Please let me know how to successfully over ride these padding settings for mobile widths.
    Thanks!
    D

    September 6, 2017 at 8:26 am #848480
    Jordan Shannon

    Hey DynamicsOnline,

    The following should work when added to quick css:

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

    Just adjust the padding and max width to whatever you need.

    Best regards,
    Jordan Shannon

    September 6, 2017 at 3:58 pm #848689
    DynamicsOnline

    Thanks much Jordan, That worked!
    D

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Change column layout padding in mobile widths’ is closed to new replies.