Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • October 8, 2015 at 11:00 am #515694
    Webamorfosi

    Hi, I have a problem with the responsive layout: I’m trying to align on one row all my 4 social icons (that are inserted in a “Partners” module) and thus reducing a little bit their size, only on mobile. I tried using CSS but can’t figure out how to do this!

    Thank you very much for your help!

    October 8, 2015 at 1:38 pm #515769
    Yigit

    Hi Webamorfosi!

    Can you please post the link to your page where we can see your element?

    Cheers!
    Yigit

    October 8, 2015 at 3:32 pm #515880
    Webamorfosi

    It’s in the Homepage, the 4 black Social Media icons on the bottom! The link is in the private content. I’m linking you the responsive view that I am talking about in the Private Content section of this post (check the iPhone 5 view).

    October 9, 2015 at 8:11 am #516205
    Rikard

    Hi,

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

    @media only screen and (min-width: 480px) {
.home .av_one_fourth {
    width: 25% !important;
}
}

    Best regards,
    Rikard

    October 9, 2015 at 9:35 am #516261
    Webamorfosi

    Hi Rikard,
    thanks for the answer but that doesn’t solve it: it puts the 4 icons on 2 rows (2 per rows), makes them really small and left aligned. I left the code in, so you can see the results!

    October 10, 2015 at 11:59 am #516765
    Ismael

    Hey!

    Please try to adjust the code a bit:

    @media only screen and (max-width: 480px) {
.responsive #top #wrap_all .avia-content-slider-even .slide-entry.slide-parity-odd, .responsive #top #wrap_all .avia-content-slider-odd .slide-entry.slide-parity-even {
    padding: 0 2%;
    float: left;
    width: 23% !important;
    clear: none !important;
}
}

    Best regards,
    Ismael

    October 10, 2015 at 2:47 pm #516805
    Webamorfosi

    Hey,
    maybe I’m expressing myself poorly (sorry!), but I mean HORIZONTAL row or line, not a vertical one! I’d like to get the icons one next to the other horizontally, under the slider, on one horizontal line.

    October 12, 2015 at 11:36 am #517272
    Ismael

    Hey!

    Yes, we know. Did you try it? It will align the icons in a HORIZONTAL row or line. Please remove the first code.

    @media only screen and (max-width: 768px) {
.responsive #top #wrap_all .avia-content-slider-even .slide-entry.slide-parity-odd, .responsive #top #wrap_all .avia-content-slider-odd .slide-entry.slide-parity-even {
    padding: 0 2%;
    float: left;
    width: 23% !important;
    clear: none !important;
}
}

    If it doesn’t work, use this:

    @media only screen and (max-width: 480px) {
.responsive #top #wrap_all .avia-content-slider-even .slide-entry.slide-parity-odd, .responsive #top #wrap_all .avia-content-slider-odd .slide-entry.slide-parity-even {
    padding: 0 2%;
    float: left;
    width: 23% !important;
    clear: none !important;
}
}

    Please remove browser cache or hard refresh the page.

    EDIT: My bad! It should be max-width, not min-width. Sorry about that.

    Regards,
    Ismael

    October 12, 2015 at 12:02 pm #517286
    Webamorfosi

    Even this way it’s not working… I’ll link you the whole CSS I’m using right now in the private content section.

    October 13, 2015 at 11:44 am #517984
    Andy

    Hey!

    please provide us admin access, so we can have a deeper look into it. Post login details here as private reply.

    Best regards,
    Andy

    October 13, 2015 at 2:12 pm #518091
    Webamorfosi

    Here you are!

    October 14, 2015 at 12:50 pm #518614
    Andy

    Hi!

    I implemented this code at the bottom of you Quick CSS field: 

    /* Kriesi custom Code */
@media only screen and (max-width: 768px) {
.slide-entry-wrap.active-slide {
display: flex;
}
img.attachment-no.scaling {
width: 80px;
max-width: 80px;
}
img.attachment-no.scaling {
margin-left: -36px !important;
}
}

    and it seems to work fine now for me. Please confirm.

    Best regards,
    Andy

    June 7, 2016 at 12:05 pm #643982
    saposkato

    Hi there!

    I would like to show in mobile version just one logo, in one column, and the others appearing after the first one. Its that possible adding some css code?

    Thanks, You do a great job with Enfold!

    Fer

    June 8, 2016 at 5:11 am #644523
    Rikard

    Hi Fer,

    I’m not sure but if you send us a screenshot highlighting what you would like to change and a link to your site we can have a look at it. Next time please open a new thread.

    Thanks,
    Rikard

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