Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • April 17, 2018 at 12:57 pm #943072
    AuroraArcus

    Im trying to have the 4 icons positioned side by side 2×2, but so far I’m unable.

    Under general styling, I wrote:

    @media only screen and (max-width: 480px) {
    #kompetenzen .av_one_fifth.avia-builder-el-last {
    width: 100%!important;
    }
    #kompetenzen .av_one_fifth {
    width: 50%!important;
    }}

    In Custom Css Class under each icon I put #kompetenzen

    Apparently there is no effect – can you help me out?

    April 19, 2018 at 2:19 am #943837
    Basilis

    Hey AuroraArcus,

    Are you referring for the icons here?
    http://nimb.ws/hxcKDl

    Best regards,
    Basilis

    April 19, 2018 at 8:38 am #943966
    AuroraArcus

    Hi Basils,

    yes exactly. Sorry for the lack of precision!

    Best regards,
    Aurora

    April 21, 2018 at 6:25 pm #944937
    Mike

    Hi,
    I added a new class to the 4 icon columns “kom-inline” & “kom-inline1”
    I then added this code in the General Styling > Quick CSS field:

    @media only screen and (max-width: 480px) { 
.kom-inline,.kom-inline1 {
    display: inline-block!important; 
    width: 105px!important; 
}
.kom-inline1 {
    margin-left: 20%!important; 
}
}

    This is the result:
    2018-04-21_122320
    Please clear your browser cache and check.

    Best regards,
    Mike

    April 22, 2018 at 11:14 am #945026
    AuroraArcus

    Hi Mike,

    amazing feedback, thank you! Works like a dream!

    I ended up putting in this code:

    @media only screen and (max-width: 480px) {
    .kom-inline,.kom-inline1 {
    display: inline-block!important;
    width: 72px!important;
    }
    .kom-inline1 {
    margin-left: 4%!important;
    }
    }

    With the above, all 4 icons are on a line on my iphone 6s. I’m unsure if it will be the same on other smartphones. Do you have an opinion about that?

    Best regards,
    Aurora

    April 22, 2018 at 3:03 pm #945043
    Mike

    Hi,
    It does seem to work on my Android, but the icon columns are not evenly spaced because “kom-inline1” is a class that is only on two of the icon columns. When I had added the classes I thought you wanted them 2×2
    I hope you don’t mind, but since you want them in one line, I changed all 4 of them to “kom-inline” and rewrote the css to add 2% margin to all 4 so they would be evenly spaced:

    @media only screen and (max-width: 480px) { 
.kom-inline {
    display: inline-block!important; 
    width: 72px!important; 
    margin-left: 2%!important; 
}
}

    Please clear your browser cache and check.

    Best regards,
    Mike

    April 22, 2018 at 8:28 pm #945132
    AuroraArcus

    Hi again Mike,

    perfect! Thank you and thanks for amazing service!!!

    You’re right, I changed my mind once I saw it was possible:)

    I have all the questions answered that I needed answered…

    Have a good day,
    Rolf

    April 23, 2018 at 4:20 am #945214
    Nikko

    Hi Rolf,

    Glad that Mike helped you and he is really a great support :)
    Please feel free to comeback if you need further assistance.
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Mobile: Icons side by side’ is closed to new replies.