Break points for mobile

  • Hi!

    I have been having issues since prior to the most recent wordpress update with my instagram feed formatting weird at certain breakpoints. Specifically when I hit the breakpoint for tablet in portrait, the feed gets really small, as if it is at the break point for a phone. I’m not sure if it is the footer widget I need to change or the plugin css I need to customize.

    I tried using the below CSS on both my theme css and plugin css and neither seemed to work. Is this something you can help with?

    my site is https://www.headedanywhere.com

    /* Tablets in portrait mode (768-980px) */
    @media only screen and ( min-width: 768px ) and ( max-width: 980px ) {
    .fwidget.et_pb_widget {
    width: 100%;
    }
    }

    /* Smartphones in landscape mode (480-768px) */
    @media only screen and ( min-width: 480px ) and ( max-width: 767px ) {
    .fwidget.et_pb_widget {
    width: 100%;
    }
    }

    Thanks!

    https://www.ads-software.com/plugins/instagram-feed/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Craig at Smash Balloon

    (@craig-at-smash-balloon)

    Hey Daina,

    Try this CSS out and see if that looks better for you:

    @media only screen and ( min-width: 480px ) and ( max-width: 700px ) {
  #sb_instagram.sbi_col_9 #sbi_images .sbi_item {
      width: 25%;
  }
  #sb_instagram.sbi_col_9 #sbi_images .sbi_item:nth-child(n+5) {
      display:none !important;
  }
}

@media only screen and ( min-width: 600px ) {
  footer .footer-widget:nth-child(n) {
      width: 100% !important;
  }
}
    Thread Starter dainasaurroar

    (@dainasaurroar)

    That did it! thank you!

    Plugin Author Craig at Smash Balloon

    (@craig-at-smash-balloon)

    Glad to hear that fixed the issue. No obligation of course, but if you like the plugin and feel like leaving a super-quick review then we always really appreciate it!

    If you have any other questions or issues in future then just let me know and I’d be happy to help.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Break points for mobile’ is closed to new replies.