Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 30, 2016 at 8:53 pm #640575
    navindesigns

    Hi,

    I currently have 21 partner logos (7 columns and 3 rows) at the bottom of my homepage

    Homepage

    On mobile, they are stacking one on top of each other which makes it a very long scroll on mobile

    anyway, i can have 2 or 3 logos appearing on the same column on mobile only?

    thanks

    May 30, 2016 at 9:39 pm #640606
    Basilis

    Hey navindesigns!

    That would make the logos look really small.
    Would it be better to have less logos for mobile?
    Would that work out for you?

    Let us know and we will see how to make it better for you

    Cheers!
    Basilis

    May 30, 2016 at 9:41 pm #640607
    navindesigns

    can i see the code to make it 2 logos per column on mobile?

    June 1, 2016 at 4:55 am #641190
    Ismael

    Hi,

    Add this in the Quick CSS Field:

    @media only screen and (max-width: 767px) {
.responsive #top #wrap_all .slide-entry {
    margin-left: 0 !important;
    width: 48% !important;
    float: left !important;
    clear: none !important;
    margin-bottom: 0;
}
}

    Note that you may find rows with only one item because the default column is set to 5. Another workaround is to create another partner logo element with the same content, set the column to 2 then toggle the elements’ display property on different screen sizes with css media queries: http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/

    Best regards,
    Ismael

    June 15, 2016 at 4:41 am #648356
    navindesigns

    I think that worked but it messed up two sections above (FROMT THE BLOG) on mobile

    June 17, 2016 at 2:50 pm #649795
    Yigit

    Hi,

    Please edit your color section element and give it a unique ID – http://kriesi.at/documentation/enfold/wp-content/uploads/sites/2/2013/12/color-section-ID.png and then change the code Ismael posted to following one

    @media only screen and (max-width: 767px) {
#your-unique-id .slide-entry {
    margin-left: 0 !important;
    width: 48% !important;
    float: left !important;
    clear: none !important;
    margin-bottom: 0;
}
}

    Best regards,
    Yigit

    June 17, 2016 at 5:46 pm #649907
    navindesigns

    thanks that works PERFECT but a few logos are on one line with empty space to the left of them (like 3 of them)

    June 20, 2016 at 6:13 pm #650985
    Yigit

    Hi,

    That would not be easily possible as seven images on each line are wrapped in a div.

    Best regards,
    Yigit

    June 20, 2016 at 6:14 pm #650989
    navindesigns

    No worries.

    That’s ok

    Thanks as always!

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Partner logos on mobile’ is closed to new replies.