Instagram Social Grid One Column

[gpstew]

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.

[Rui Guerreiro – SUPPORT]

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

[gpstew]

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.

[Rui Guerreiro – SUPPORT]

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

[gpstew]

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!

[David Martin – Support]

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.

[gpstew]

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.

[Swift Ideas – Ed]

Hi @gpstew

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

Ed

[gpstew]

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.

[Swift Ideas – Ed]

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