Tagged: 

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • April 18, 2016 at 6:22 am #616054
    mcraig77

    Ahoy –

    How do I get these elements to not have the padding when in the mobile view?

    https://www.dropbox.com/s/fiipla24e5yyz82/Screenshot%202016-04-17%2021.19.05.png?dl=0

    I added some padding in the edit column area so things are centered in desktop view but for mobile they get all janky – I dont want these elements applied to mobile.

    FAMILIES WITH YOUNG CHILDREN
    https://www.dropbox.com/s/xes3m230eompts9/Screenshot%202016-04-17%2021.20.34.png?dl=0

    COUPLES
    https://www.dropbox.com/s/cvqxovsgrymp0ol/Screenshot%202016-04-17%2021.21.13.png?dl=0

    Please advise

    April 19, 2016 at 6:54 am #617134
    Rikard

    Hey mcraig77,

    Please try the following in Quick CSS under Enfold–>General Styling:

    @media only screen and (max-width: 767px) {
.home .avia-builder-el-22 {
    0px 15px 0px 0px !important;
}

.home .avia-builder-el-24 {
    padding: 0px 90px 0px 0px !important;
}
}

    Regards,
    Rikard

    April 19, 2016 at 7:45 am #617173
    mcraig77

    Ahoy – I added that code and things still look off. Please advise.

    April 21, 2016 at 5:13 am #618867
    Rikard

    Hi,

    Send us admin login details in private and we’ll do it for you.

    Best regards,
    Rikard

    April 21, 2016 at 6:13 am #618911
    mcraig77

    Hi there

    Attached. I had to make a copy of the page bc my client need this fixed before it goes live – so please make changes the page Home-copy page below

    April 25, 2016 at 10:15 am #621127
    Andy

    Hi!

    use this code inside of Quick CSS field:

    .flex_column.av_one_half.av-animated-generic.bottom-to-top.flex_column_div.first.avia-builder-el-22.el_after_av_one_third.el_before_av_one_half.column-top-margin.avia_start_animation.avia_start_delayed_animation {
padding-left: 0px !important;
}
.flex_column.av_one_half.av-animated-generic.bottom-to-top.flex_column_div.avia-builder-el-24.el_after_av_one_half.avia-builder-el-last.column-top-margin.avia_start_animation.avia_start_delayed_animation {
padding-left: 0px !important;
padding-right: 0px !important;
}

    Best regards,
    Andy

    April 25, 2016 at 10:16 am #621128
    Andy

    Hey!

    ah sorry, as it is for mobile only, use this code instead:

    @media only screen 
  and (max-width: 736px)  {
.flex_column.av_one_half.av-animated-generic.bottom-to-top.flex_column_div.first.avia-builder-el-22.el_after_av_one_third.el_before_av_one_half.column-top-margin.avia_start_animation.avia_start_delayed_animation {
padding-left: 0px !important;
}
.flex_column.av_one_half.av-animated-generic.bottom-to-top.flex_column_div.avia-builder-el-24.el_after_av_one_half.avia-builder-el-last.column-top-margin.avia_start_animation.avia_start_delayed_animation {
padding-left: 0px !important;
padding-right: 0px !important;
}}

    Regards,
    Andy

    April 25, 2016 at 7:27 pm #621610
    mcraig77

    Just tried that – and this is how it looks on my phone…

    I’m using android and chrome…

    Please Advise

    April 26, 2016 at 5:58 am #621893
    Vinay

    Hi!

    please add the below CSS in Quick CSS to make it look like the screenshot in private

    @media only screen and (max-width: 500px) {
.iconbox_left_content .iconbox_content{    
    display: block!important;
    clear: both!important;
}}

    Best regards,
    Vinay

    April 26, 2016 at 6:14 am #621898
    mcraig77

    Ahoy –

    Unfortunately I’ve added that code and it still doesn’t work… Things still look the same…

    April 26, 2016 at 1:00 pm #622081
    Andy

    Hey!

    it looks like this for me on mobile:

    View post on imgur.com

    So everything seems to be fine now for me. Please clear browser cache and refresh a few times. Check on another mobile device as well.

    Regards,
    Andy

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