Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 6, 2015 at 8:03 pm #514724
    lzevon

    I’ve read through several existing posts to try and figure this out on my own, but can’t figure out how to prevent my logo from being sucked under the navigation when viewing the site responsively. I want the logo bottom flush with the top of the navigation so there is no line or division between these two areas and I would like it to work this way on all layouts. I’ve added the following CSS which has me part of the way there, but I still can’t figure out how to prevent losing part of the logo under the navigation in certain responsive layouts.

    strong.logo img { padding: 0px; bottom:-23px; } /* this gets the lgog where I want it on the desktop */
    .responsive .logo img { margin: auto; padding-bottom: 10px; } /* 1 iteration of many failed attempts to behave in kind responsively */

    Thanks!

    October 7, 2015 at 12:17 pm #515107
    Andy

    Hey lzevon!

    it looks fine to me on mobile. Can you provide us screenshots of the issue? use imgur.com or dropbox.
    Use media queries to control different behavior on mobile: 

    @media only screen and (max-width: 767px) {
strong.logo img { 
padding: 0px; bottom:-23px; 
}}

    Cheers!
    Andy

    October 7, 2015 at 3:19 pm #515293
    lzevon

    Thanks Andy, I created the screencast for you…

    October 8, 2015 at 9:37 am #515649
    Andy

    Hi!

    thanks for the screencast.

    You are using this code:

    @media only screen and (max-width: 767px) {
.responsive #top .logo {
height: 80px !important;
}}

    change it to something like: 

    @media only screen and (max-width: 767px) {
.responsive #top .logo {
height: 104px !important;
}}

    If you need different media queries for even more screen sizes and devices then check out this link: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Hope this helps.

    Best regards,
    Andy

    October 8, 2015 at 3:28 pm #515867
    lzevon

    OK, thanks Andy. I think I was hoping for a simpler solution whereby I could keep the logo 0px from the bottom of the container regardless of layout. If I have to declare a specific style for each layout I will, but if it’s possible to keep it bottom:0px for all layouts that would be ideal. IS there a more elegant way, or is separate declarations the only way?

    October 9, 2015 at 11:11 am #516307
    Andy

    Hi!

    if you want a specific look, you need to define it’s style via CSS code (media queries).

    Regards,
    Andy

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘responsive logo padding’ is closed to new replies.