Tagged: , , , ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • August 28, 2015 at 2:33 pm #494845
    enzowillemstad

    In a Grid Row, in a column, I’ve set the padding-left to 50% . This works perfect on every resolution except Mobile. It looks like mobile has it’s own padding values. Is there a way to edit the mobile padding settings per element?

    August 28, 2015 at 2:43 pm #494852
    enzowillemstad

    I’ve editted grid.css:

      .responsive #top #wrap_all .av-flex-cells .no_margin{
	  display: block;
	  margin: 0;
	  height:auto !important;
	  overflow: hidden;
/*	  padding-left:8% !important;*/
	  padding-right:8% !important;
  }

    That seems to work. I’m not sure if this is a clean solution..

    August 28, 2015 at 5:06 pm #494997
    Elliott

    Hey!

    I viewed your link but I’m not really sure what your trying to do. Can you take a screenshot and highlight your intentions?

    Cheers!
    Elliott

    September 13, 2015 at 4:18 am #502195
    paragonskydive

    Hi,
    Iv a similar issue, I have included padding in columns that looks great on a desktop, but the padding squishes the content or puts it to the side on a mobile device. Is there a way to remove the padding just for responsive mode?

    Thanks

    September 13, 2015 at 4:19 am #502196
    paragonskydive

    Its not in a grid though just the normal 1/2 and 1/3 type layout content

    September 13, 2015 at 3:15 pm #502321
    Elliott

    Hey!

    Surround your code with this so it only gets applied on larger screens.

    @media screen and (min-width: 767px) {

}

    If your still having trouble then send us a link to your page so we can take a look.

    Regards,
    Elliott

    September 16, 2015 at 1:37 am #503785
    paragonskydive

    HI,

    yeah, that didnt fix the problem or I dont know how to use it correctly.

    Would really appreciate help on this, thanks.

    September 16, 2015 at 12:41 pm #503985
    Andy

    Hi!

    try this code:

    @media only screen and (max-device-width: 736px) {
.flex_column.av_one_half.flex_column_table_cell.av-equal-height-column.av-align-top.avia-builder-el-16.el_after_av_one_half.el_before_av_section.avia-builder-el-last {
padding: 0 !important;
}}

    Regards,
    Andy

    September 17, 2015 at 2:19 am #504462
    paragonskydive

    Hi,

    I put this into the General Styling CSS and it worked perfectly for one column on the front page, but I want to do it for multiple columns all over the site.
    Iv tried to put it into the individual column CSS, but this dosnt work.
    Maybe Im not doing it wrong, please let me know?

    Thanks

    September 17, 2015 at 1:44 pm #504759
    Yigit

    Hey!

    Please enable custom CSS field for ALB elements – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and give your column elements a custom class and then change your code to following one 

    @media only screen and (max-device-width: 736px) {
.your-custom-class.flex_column{
padding: 0 !important;
}}

    Regards,
    Yigit

    September 22, 2015 at 8:20 pm #507328
    paragonskydive

    thanks, that worked great

    September 22, 2015 at 9:33 pm #507358
    Basilis

    Hey!

    Great you got it shorted!
    We would love to assist again, if anything is needed.

    Regards,
    Basilis

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Column padding on mobile devices?’ is closed to new replies.