Most modern WordPress themes have what is called a Responsive theme. It means that the website format adjusts appropriately according to the particular screen size viewing it. These days more and more people are browsing the web on their phones and on their tablets. These screens are much smaller than PC or laptop screens. 

Before responsive webdesign took hold, websites used to look terrible on small mobile screens. Usually the whole website would scale down to the tiny screen and the fonts would be so small that the site would be unreadable, forcing the user to pinch out to zoom in and scroll from side to side to read lines. 

Good thing some smart folks invented CSS (Cascading Style Sheets) which is the key to allowing sites to be responsive. When the browser detects the size or resolution of the device, it will apply the correct format and sizing, thereby improving readability. For example, if the device is a large screen, it will display the content in 2 or even 3 columns. And if it detects a small screen, it will only show the content in 1 column.

I have chosen a theme called Rise by Thrive Themes. It's a responsive theme, and it adjusts well to different screen sizes as displayed below.

Notice how the logo looks fine at Full Size

How to Keep WordPress Logo from Shrinking Too Much on Mobile

I adjusted the width of the browser to a Mid Size Screen such as Tablets, and it still looked fine.

How to Keep WordPress Logo from Shrinking Too Much on Mobile

But for some reason (bug) it shrinks my logo way too small when viewed by a small screen as shown below.

How to Keep WordPress Logo from Shrinking Too Much on Mobile

In order to fix this we need to edit the CSS. But we are not going to edit the main theme's CSS. The system even warns us not to touch it when we go to Appearance, Edit CSS. That's because we can break how the site works by entering buggy code. And any edits to the CSS here will be lost when you update to a new version of the theme. 

How to Keep WordPress Logo from Shrinking Too Much on Mobile

Thankfully there's another place, a much safer one to make changes. For Thrive's themes, it can be found by going to Thrive Dashboard, Theme Options, Style & Layout Settings. There you can find the Custom Css field. It's here where you can override the main CSS, and the code persists even after you update the theme.

How to Keep WordPress Logo from Shrinking Too Much on Mobile
How to Keep WordPress Logo from Shrinking Too Much on Mobile

This is the code to add so you can keep the logo from shrinking too much or getting squished.

You can copy it here.

/* 20190607 added so logo resize in mobile not too small */
@media only screen and (max-width: 768px) {
header.side #logo img {
max-width: 280px !important;
}
}

Paste it into the Custom Css field and Click Save All Changes. Depending on the size of your logo and how you want it to look, you can adjust the 280px part until you get the best results. Refresh one of your pages and play around with the width of the browser so you can see how the adjustments are rendered.

How to Keep WordPress Logo from Shrinking Too Much on Mobile

And that's how you can use Custom Css to override the main CSS of your theme to make fine tuning customizations, at least with Thrive Themes. 

For more tips to help you with your Online Business Skills and turn your Passion into Success, Subscribe Here.

What are the 3 things you need to start an Online Business? Click Here to find out.

If you liked this video, please πŸ‘ Like and πŸ’Œ Share it. It would be much appreciated. 😍

Transcript of Video

Tags: logo,shrinking,logo shrinks too much,how to stop logo from shrinking,responsive web page,custom CSS,CSS,max-width,important,Thrive Themes,Rise Theme,logo too small on phone

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}