Mobile Device Display Issue After Increased Header Logo

Hello!

It appears class .site-logo has 2 settings in style.css. If you keep .site-logo to max-width: 100% it will “respond” to the smaller screen.

It appears there is a background color issue as well when screen sizes change.

Hope this helps.

Thanks Dwevans,

I am new to CSS, please help me a little bit more.

I added “max-width: 100%” under site-logo. Yes, it fix the problem on mobile device, but on desktop, it changed the logo size back to the default (smaller like 350px, i have it 550px). I assume it over-writes the “max-width: 550px”??

And i found there are also some settings as below:

site-header .logo {
margin: 40px 0;
float: left;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}

.site-header .logo a {
display: block;
height: 100%;
}

.site-header .logo {
width: 80px;
height: 20px;

i don’t know if any of these helps my issue??

Thanks!

Your site is using Bootstrap. The div that controls the width of area where the site logo is normally “contained” to 1/3 (col-md-4) of the total row, with the other 2/3 allotted for the nav menu.

You over-rode the width of the site logo when you first set the max-width to 550px, but it kept that size in every screen size. In order to have the “best of both worlds” you will need to customize your media queries to account for the size of the site logo for the larger screen sizes.

Bootstrap’s mindset is mobile first – small screens to large. Do you know how to add/modify the media queries?

Looks like i am getting sth difficult for me….
I have no idea how to add/modify the media queries…. Could you please give me some instruction? Thanks!

Also, i am thinking if it is possible to expand the width of the content on my mobile device to match the 550px big logo? So, i dont need to mess around the logo?

I did some research, seems like i located where i need to add/modify:

/* All Mobile Sizes */
@media only screen and (max-width: 1024px) {

/* Smaller than standard 980 */
@media only screen and (max-width: 991px) {

these are the closest i can found, there are soooooo many media sizes…. i dont know if i located concretely?

Thanks so much ahead!

Your on the right track. Once the screen size goes below 550px is when the logo won’t fit.

Try this:

@media only screen and (min-width: 550px) {
.site-logo {
max-width: 550px;
}
}

Your media queries are at the bottom of your style sheet. You can add it to the very end and it should work.

Also, please note if you are making these changes to the original theme’s stylesheet you will lose them on a theme update, unless the author(s) have made special considerations to avoid it. In most cases these modifications get lost on an update.

If this is all the “customizing” you are doing, you can make a file to store your changes and then re-add them should you encounter a theme update that wipes them out.

For more significant changes a child theme is recommended by WordPress to ensure your modifications to the original theme are not lost.

IT WORKS!!

Thank you so much! One more issue. It shows a little bit of background on the very right side of my site: superaircleanser.com on iphone. I believe it is messed up by me. Could you please let me know how i can fix this?

And really appreciate the child theme advise. I have been reading ppl are using child theme for their project and i will find a way to do this!

THANKS AGAIN!

I see it on my phone as well. Has it always been there? The desktop screen sizes don’t display it even when my browser is scaled down to a smaller width.

I don’t think it’s anything you did. Unless you’ve been making changes since before this forum event. LOL

Most things like this are managed thru CSS. Does it display the same on android phones as well?

I fixed it! Just restored the parent css and it removes the gap!

Thank you again!

Great!

Glad I could help you a little.

Have a good rest of the day!