New Landing How can we help? Atelier Instagram Social Grid One Column

Viewing 10 posts - 1 through 10 (of 10 total)
  • Posted in: Atelier
  • #325962
    gpstew
    Member
    Post count: 16

    Hello there,

    Thanks for the theme. My client would like Instagram as only one image (one column). The lowest I can set it to is 3 columns, 1 row. Could you please assist? They would like static images to both sides of the Instagram image. I believe I could achieve this by setting an image block to 1/3, then social grid (instagram) to 1/3, and then another image block to 1/3. However, everything I have tried to get 1 column has messed it all up.

    Thanks

    Attachments:
    You must be logged in to view attached files.
    #325976
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    Hi,

    Can you add those elements to a page and provide us the link?
    Guess the only way will be to hide the 2 last instagram images.

    -Rui

    #325977
    gpstew
    Member
    Post count: 16

    Here is the link…
    http://dev301.createattn.com

    It is set as front page…these are not the final images, but they will work as placeholders.

    Looking forward to reply, thanks!

    Attachments:
    You must be logged in to view attached files.
    #326093
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    Try the custom css below.

    .blog-grid-items .blog-item {
        display: none;
    }
    
    .blog-item:first-child {
        width: 100%!important;
        display: block!important;
        height: 285px!important;
    }

    -Rui

    #331390
    gpstew
    Member
    Post count: 16

    Thanks for the help, however, there is trouble when viewing at a mobile size. At ≈767px width, it stacks, which is fine, however, it is not showing correctly as it is sized down even further. Please advise.

    Thanks!

    #331391
    David Martin – Support
    Moderator
    Post count: 20834

    Hi,

    Do you refer to the height of each causing the spacing at the bottom of each Insta image?

    If so, you have many media queries within your custom CSS forcing a specific height for the Insta image on that screen size. Please remove the forced height in all your media queries.

    The JS file Isotope will dynamically set the height.

    #331392
    gpstew
    Member
    Post count: 16

    Thanks for the response, unfortunately, no. I set all of the media queries because it was not automatically resizing as expected. If you temporarily comment these out, you will see that it is not responsive in the correct way.

    I have attached some screenshots.

    The first two show how there are spacing issues when scaling down to mobile size (with media queries)
    The last two show how things look when media queries are commented out and only the css from above in this thread is used. It is not correct on desktop or mobile.

    Thanks for you help!

    Attachments:
    You must be logged in to view attached files.
    #331404
    Swift Ideas – Ed
    Keymaster
    Post count: 15264

    Hi @gpstew

    I’ve adjusted the CSS for you – take a look now?

    Ed

    #331408
    gpstew
    Member
    Post count: 16

    Great, we are REALLY close now. Please see attached screenshot and notice bottom spacing issue.

    Thanks!

    Attachments:
    You must be logged in to view attached files.
    #331411
    Swift Ideas – Ed
    Keymaster
    Post count: 15264

    767 px viewport css should be this:

    @media screen and (max-width: 767px) {
    .blog-item:first-child {
        width: 100%!important;
        display: block!important;
        height: 463px!important;
        margin-bottom: 30px!important;
    }
    }

    Thanks,

    Ed

Viewing 10 posts - 1 through 10 (of 10 total)

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

License required for the following item
Login and Registration Log in · Register