New Landing › How can we help? › Atelier › Instagram

Viewing 15 posts - 1 through 15 (of 24 total)
1 2
  • Back to forum
    Posted in: Atelier
  • November 16, 2015 at 3:20 pm #229043
    dsirard11
    Member
    Post count: 122

    Hello,

    We have instagram on our home page. We have this code in place to make sure only it displays four columns only:

    @media only screen and (max-width: 1024px) {
    .blog-grid-items .blog-item.col-sm-sf-5 {
    width: 25%!important;
    }
    }

    That works fine but we would like only one row to show. So only four images display. Is there an adjustment I could make?

    Thank you,
    Dawna

    Attachments:
    You must be logged in to view attached files.
    November 16, 2015 at 3:21 pm #229046
    David Martin – Support
    Moderator
    Post count: 20834

    Hi,

    It’s divisible by 100, so 20% will add 5 images to one row.

    Thanks,
    David.

    November 16, 2015 at 3:29 pm #229049
    dsirard11
    Member
    Post count: 122

    Hi David,

    I forgot to mention the problem only occurs when viewing the site on an iPad. Does that change anything?

    On a desktop or laptop it looks fine.

    Thank you,
    Dawna

    November 16, 2015 at 3:35 pm #229053
    David Martin – Support
    Moderator
    Post count: 20834

    Hi,

    Yes that will change the required media query. Please test the below, for specific iPad viewing:

    @media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { 
.blog-grid-items .blog-item.col-sm-sf-5 {
width: 25%!important;
}
}

    Cheers,
    David.

    November 16, 2015 at 3:40 pm #229057
    dsirard11
    Member
    Post count: 122

    Okay – I’ll test and get back to you. 🙂

    By the way – could you help me please with the other ipad issues? I posted another topic but no one has answered. 🙁

    November 16, 2015 at 4:10 pm #229077
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Hi

    Will check it

    – Kyle

    November 16, 2015 at 4:16 pm #229078
    dsirard11
    Member
    Post count: 122

    Thank you!!! 🙂

    November 16, 2015 at 4:17 pm #229079
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    No problem

    November 16, 2015 at 4:47 pm #229097
    dsirard11
    Member
    Post count: 122

    Unfortunately, it didn’t fix the issue. We still have two rows. Any other ideas? 🙂

    November 16, 2015 at 4:53 pm #229101
    David Martin – Support
    Moderator
    Post count: 20834

    Hi,

    I added 25%, it should be 20%. 20×5=100% of the page width.

    Please use this:

    @media only screen and (max-device-width: 1024px) and (min-device-width: 768px)
.blog-grid-items .blog-item.col-sm-sf-5 {
    width: 20%!important;
}

    – David.

    November 16, 2015 at 5:01 pm #229105
    dsirard11
    Member
    Post count: 122

    Still not working. 🙁

    November 16, 2015 at 5:11 pm #229112
    David Martin – Support
    Moderator
    Post count: 20834

    You had not updated the CSS.

    It is now working, I updated the % value.

    – David.

    November 16, 2015 at 5:13 pm #229115
    dsirard11
    Member
    Post count: 122

    I’m confused – I still see two rows and five images (one image on the second row).

    November 16, 2015 at 5:21 pm #229117
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Try clearing your cache

    – Kyle

    November 16, 2015 at 5:28 pm #229124
    dsirard11
    Member
    Post count: 122

    Still not right. see image.

    Attachments:
    You must be logged in to view attached files.
  • Back to forum
    Posted in: Atelier
Viewing 15 posts - 1 through 15 (of 24 total)
1 2

You must be logged in and have valid license to reply to this topic.

License required for one of the following items
Login and Registration Log in · Register