ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Atelier
• May 25, 2017 at 12:30 pm #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.
  May 25, 2017 at 2:15 pm #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

  May 25, 2017 at 2:45 pm #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.
  May 26, 2017 at 10:22 am #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

  August 2, 2017 at 5:28 am #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!

  August 2, 2017 at 10:37 am #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.

  August 2, 2017 at 1:12 pm #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.
  August 4, 2017 at 3:46 pm #331404
  Swift Ideas – Ed

  Keymaster

  Post count: 15264

  Hi @gpstew

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

  Ed

  August 4, 2017 at 4:42 pm #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.
  August 7, 2017 at 4:27 pm #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

• Back to forum

  Posted in: Atelier