Logo Size on Mobile Corporate Pro

[defree99]

I'm using Corporate Pro here:

Home

And the logo looks fine on desktop computers.

But on my mobile phone the logo doesn't fit in the header space.

I'm using an iPhone 7 plus.

How can I fix this?

[Terry]

Corporate Pro is a mobile first theme which means the css is written for a smaller screen first.

If you're comfortable editing the style.css, on or around line 1489 you'll be working here:

.site-header > .wrap {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    height: 60px;
    height: 6rem;
    transition: height 0.3s ease;
}

to change the height to:

    height: 100px;
    height: 10rem;

If you're not comfortable editing the style.css, add the css to Appearance=>Customize=>Additional CSS

.site-header > .wrap {
    height: 100px;
    height: 10rem;
}

Victor has a great post here on using the browser inspector to inspect and try out css changes. You can also see the different responsive views or different screen sizes in the inspector.

Let us know how that works for you and mark it Resolved if you're all set.

[Terry]

This may create a duplicate post but the original isn't showing on my screen...
** if the great than sign is displaying as > sorry it's a greater than sign**

The change will require editing the style.css if you're comfortable with that, or adding css to the Customizer.

For the style.css edit, on or around line 1489 you'll change the height.
from

.site-header > .wrap {
	position: relative;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	height: 60px;
	height: 6rem;
	transition: height 0.3s ease;
}

to

.site-header > .wrap {
	position: relative;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	height: 100px;
	height: 10rem;
	transition: height 0.3s ease;
}

or you can add the css to the Customizer. In the WP Admin Appearance=>Customize=>Additional CSS

.site-header > .wrap {
	height: 100px;
	height: 10rem;
}

Let us know how you make out and mark the post "Resolved" when you're all set.

[defree99]

Thank you!

[Author]

Posts