Digital experiences for all disciplines
New Landing › How can we help? › Atelier › Instagram Social Grid One Column
New Landing › How can we help? › Atelier › Instagram Social Grid One Column
- This topic has 9 replies, 4 voices, and was last updated 6 years by Swift Ideas – Ed.
-
Posted in: Atelier
-
May 25, 2017 at 12:30 pm #325962
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.May 25, 2017 at 2:15 pm #325976Hi,
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
May 25, 2017 at 2:45 pm #325977Here is the link…
http://dev301.createattn.comIt 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.May 26, 2017 at 10:22 am #326093Try 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
August 2, 2017 at 5:28 am #331390Thanks 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!
August 2, 2017 at 10:37 am #331391Hi,
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.
August 2, 2017 at 1:12 pm #331392Thanks 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.August 4, 2017 at 3:46 pm #331404August 4, 2017 at 4:42 pm #331408Great, 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.August 7, 2017 at 4:27 pm #331411767 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
-
Posted in: Atelier
You must be logged in and have valid license to reply to this topic.