How to Keep WordPress Logo from Shrinking Too Much on Mobile

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

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

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

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.

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.

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.

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.

Did you know you can create your own website with 1 click of a button. Start yours now with Bluehost. Up to 66% off!

Transcript of Video

welcome to sharing your passion calm I

am chill and my goal is to help people

create an online business which can also

be called digital or online marketing to

do so I'll be teaching you how to create

your own website using WordPress to

email automation make online courses add

membership access earn through affiliate

marketing and lots more subscribe and

hit the notification bell if you are

interested in any or all of these thank

you hi we are going to tackle the

problem when your logo shrinks to small

as your website is viewed in a small

screen such as a smartphone the solution

is making a change in your CSS which

stands for cascading style sheets CSS

controls the way your website looks

including colors layout fonts etc it

also allows your website to adapt its

look to the different types of devices

and sizes such as pcs with their large

screens tablets medium screens and small

screens again like smartphones let me

show you what I mean here's a problem

this is our logo and I'm going to shrink

the browser to pretend it's being viewed

by a smaller device like a phone okay

it's still okay it's still okay and then

BOOM

okay so that is the problem it shrinks

to small but it's fine when it's you

know this width which is I guess what a

tablet might view this web page okay so

how do we fix this let's get into our

WordPress dashboard okay so what we're

going to do is change the CSS but you

know what we're not going to touch at

all the CSS of our theme you could do so

by going to appearance theme

editor but I'm not gonna touch anything

you know I I don't want to break

anything with our theme so you're even

warned that doing something here can you

know cause problems he you might not

know about but it will show up at some

point later okay so I'm not going to do

anything here what I'm going to do is

change make a change in the custom CSS

for my theme which is rise by thrive

themes I can change that

or add some CSS here thrive dashboard go

to theme options in other things that

might be a different location so you

just have to find where you can add CSS

by not touching the CSS of your theme

it's just by you know adding customizing

to the the CSS of your theme so here we

are at general settings but it's over

here style and layout settings and this

is what we're looking for custom CSS and

I'm going to add code to this this is

what I'm pasting in and what's important

here is if you don't understand code you

don't need to understand all this all

you need to do is know what the value

here is it's going to tell you I guess

how small should we shrink your logo

when it's viewed by a smaller screen and

I'm telling it to only go down to

minimum of know a maximum of 220 pixels

that's as small as it can go in I guess

that's my minimum

but they call it max-width here okay so

let's save that currently it might have

been shrinking to like 100 pixels but

now I'm saying only shrink it down to a

minimum of 220 pixels okay so it's been

saved now let's test it okay this is the

same browser where we saw it shrink to a

really small size okay no oh no you know

what I have to reload the code okay now

I can shrink it and boom do you see that

you can still read it and this is

probably the size of you know this is as

small as it gets in a phone this is as

small as the website gets and it's still

readable all right so I only changed the

size by I don't know let's see about 20

percent earlier it was about 60 percent

so that's the way of solving that

problem when your logo shrinks too much

when it's viewed in a smaller screen

thanks for watching I hope you found

this useful and if you have other

questions regarding the topic or other

How to Keep WordPress Logo from Shrinking Too Much on Mobile

Transcript of Video

Beautiful WordPress Website for $3 a month using Bluehost Astra Elementor

OceanWP Installation Problems and too many ads not best free theme 2020 Review

How to Safely Update WordPress, PHP and Theme

If WordPress Theme is Suspended like Astra You can still Manual Install & Create Site

Pro Website in 3 Mins with Best Free Theme Astra Elementor WPforms Templates 2020

Change Admin Author Profile Picture in WordPress using Gravatar

Beautiful WordPress Website for $3 a month using Bluehost Astra Elementor

Memberpress New Course Plugin Review and Problems

OceanWP Installation Problems and too many ads not best free theme 2020 Review

How to Safely Update WordPress, PHP and Theme