Logo on mobile

1daytokyo · November 2015

HI there, my client wants a larger than standard logo, but when I try to enlarge it in CSS the mobile responsive view does not shrink down properly.

Can you tell me how I can get it so both look good? Right now you can see it in reference if you could check it out. Thanks much!

http://testsite.askbluestone.com

From a previous post of another user, I used some of the css to make mine work too. That could be the issue.

#Top_bar #logo img { max-width: 430px; }

#Top_bar #logo { display: block; height: 120px; line-height: 0px; padding: 0px 0px; }

#Top_bar .logo { position: relative; min-height: 30px; }

#Top_bar.is-sticky .logo { min-height: 100px; }

1daytokyo · November 2015

The way you see the browser view is what they want in the browser, but to center/shrink down in mobile. Right now the mobile view logo sits on top of the responsive menu icon.

Albert · November 2015

Hi,

for mobile devices, you supposed to use below css:

@media only screen and (max-width: 767px) {
    #Top_bar #logo img { max-width: 250px !important; }
}

1daytokyo · November 2015

Thank you!

Albert · November 2015

You're welcome

Logo on mobile

Comments