Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 4, 2020 at 11:25 am #1181220
    Munford

    HI

    I am looking for some code to adjust the padding on mobile columns across my site, without having to manually give an ID to all the columns like is in this thread: https://kriesi.at/support/topic/column-padding-on-mobile-devices/.
    I am using code like this:

    @media only screen and (max-width: 768px) {
.flex_column.av_three_fifth.flex_column_div {
padding: 20px !important;
}
.flex_column.av_one_half.flex_column_table_cell.av-equal-height-column.av-align-top.first.avia-builder-el-16.el_after_av_hr.el_before_av_one_half
	{
padding: 20px !important;
}
.flex_column.av_one_half.flex_column_table_cell.av-equal-height-column.av-align-top.avia-builder-el-18.el_after_av_one_half.el_before_av_hr
	{
padding: 20px !important;
}
.flex_column.av_one_half.flex_column_table_cell.av-equal-height-column.av-align-top.first.avia-builder-el-21.el_after_av_hr.el_before_av_one_half
	{
padding: 20px !important;
}
.flex_column.av_one_half.flex_column_table_cell.av-equal-height-column.av-align-top.avia-builder-el-23.el_after_av_one_half.el_before_av_partner
	{
padding: 20px !important;
}
}

    which targets the landing page, but I have lots of columns on the site and this is only targeting a few.
    Is there a way to do this without adding an ID to each column?

    I also did a test with this, where I tagged one column, but I didn’t see a change:

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

    thanks
    Nancy

    February 4, 2020 at 5:40 pm #1181392
    Victoria

    Hey Munford,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

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

    If you need further assistance please let us know.

    Best regards,
    Victoria

    February 4, 2020 at 11:20 pm #1181577
    Munford

    thanks
    that fixed some of the columns but now there is a 20px padding on all my partner logos as well. Is there a way to NOT target them?

    If I wanted to target only certain pages with that code, would it be fx:

    .page-id-1617 .responsive #top #wrap_all .flex_column {
    padding: 20px !important;
  }

    ?
    it’s not working for me….

    • This reply was modified 4 years, 9 months ago by Munford.
    February 7, 2020 at 6:57 pm #1182376
    Victoria

    Hi Munford,

    Yes, you can do the page id to target only specific pages. Please try this css and let us now if this solves the issue:

    
@media only screen and (max-width: 767px) {
  .responsive #top.page-id-1516 #wrap_all .flex_column_table div.flex_column {
    padding: 20px !important;
  }	
}

    Best regards,
    Victoria

    February 19, 2020 at 6:37 pm #1186139
    Munford

    yes that worked thanks!

    February 20, 2020 at 6:27 pm #1186448
    Victoria

    Hi Munford,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

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