Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1181220

    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

    #1181392

    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

    #1181577

    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 3 months, 4 weeks ago by  Munford.
    #1182376

    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

    #1186139

    yes that worked thanks!

    #1186448

    Hi Munford,

    Glad we could help :)

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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.