Padding Issues in Mobile View

  • Resolved dainasaurroar

    (@dainasaurroar)


    8 years, 3 months ago

    Hi!

    You ahve been so helpful with my questions!

    I have been trying to figure this out for a while, but have given up since I can’t figure it out. For large screens I was able to successfully remove any padding from the bottom of instagram feed so that the feed sits flush with my footer. It’s also fine on landscape mode for my 9″ ipad pro. However in portrait mode the padding returns, it is also present on my mobile in both modes. How can I remove the padding for tablet (portrait) and mobile (both portrait and landscape) so that it sits flush with my footer?

    https://www.headedanywhere.com

    I tried adding this in on my style sheet and it is not working:

    @media (max-width: 980px) {
    #footer-widgets {
    padding: 0%!important;
    }
    }

    @media (max-width: 767px) {
    #footer-widgets {
    padding: 0%!important;
    }
    }

    @media (max-width: 479px) {
    #footer-widgets {
    padding: 0%!important;
    }
    }

    Thanks!

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

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

    (@craig-at-smash-balloon)

    No problem!

    This seemed to work for me:

    @media (max-width: 980px) {
#footer-widgets {
    padding: 0 !important;
}
}
    Thread Starter dainasaurroar

    (@dainasaurroar)

    Thanks for the quick response!

    For some reason it’s not working for me and I still get the padding or margin under the plugin area when viewing on mobile and portrait mode on tablet. ??

    Plugin Author Craig at Smash Balloon

    (@craig-at-smash-balloon)

    Hello again,

    It looks like I overlooked the very thin windows. Try this as well:

    @media (max-width: 479px) {
    footer #footer-widgets .footer-widget:nth-child(n) {
        margin-bottom: 0 !important;
    }
}
    Thread Starter dainasaurroar

    (@dainasaurroar)

    Hi – unfortunately it is still not working. I’m wondering if I should hide the plugin after a certain break point?

    This is all the css I have in the sb settings in case this helps?

    #sb_instagram .sbi_follow_btn {
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    text-align: center;
    padding-bottom: 30px;
    padding-top: 15px;
    font-weight: normal;
    font-style: normal;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px
    }

    .sbi_follow_btn {
    background: #f8f8f8;
    color: #ababab;
    }

    #sbi_load {
    padding-top: 0px !important;
    }

    @media(max-width: 600px){
    #sb_instagram #sbi_images .sbi_item{ display: none; }
    #sb_instagram #sbi_images .sbi_item:nth-child(-n+4){ display: inline-block; }
    }

    @media only screen and ( min-width: 480px ) and ( max-width: 700px ) {
    #sb_instagram.sbi_col_9 #sbi_images .sbi_item {
    width: 25%;
    padding: 0!important;
    }
    #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;
    padding: 0!important;
    }
    }

    @media (max-width: 980px) {
    #footer-widgets {
    padding: 0%!important;
    }
    }

    @media (max-width: 767px) {
    #footer-widgets {
    padding: 0%!important;
    }
    }

    @media (max-width: 479px) {
    footer #footer-widgets .footer-widget:nth-child(n) {
    margin-bottom: 0 !important;
    }
    }

    This is the custom css I have in my child theme style sheet:

    /* bottom elements padding */
    .bottom-nav {
    padding-left: 30px;
    }

    @media (min-width: 981px) {
    .et_pb_gutters2 .footer-widget {
    margin: 0 !important;
    }
    }

    @media only screen and ( min-width: 480px ) and ( max-width: 700px ) {
    {
    .et_pb_gutters2 .footer-widget {
    margin: 0 !important;
    }
    }

    @media only screen and ( min-width: 600px ) {
    {
    .et_pb_gutters2 .footer-widget {
    margin: 0 !important;
    }
    }

    #menu-footer {
    width: 100%!important;
    }

    /*additional instagram padding*/
    @media (max-width: 980px) {
    #footer-widgets {
    padding: 0%!important;
    }
    }

    @media (max-width: 767px) {
    #footer-widgets {
    padding: 0%!important;
    }
    }

    @media (max-width: 479px) {
    #footer-widgets {
    padding: 0%!important;
    }
    }

    Thread Starter dainasaurroar

    (@dainasaurroar)

    Actually – scratch that. it’s working!

    Thank you!

    Plugin Author Craig at Smash Balloon

    (@craig-at-smash-balloon)

    Great! Glad we could figure that out.

    Thanks for the review as well! Much appreciated. Have a great rest of your week.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Padding Issues in Mobile View’ is closed to new replies.