Changing size of the logo
-
Could anyone post the CSS code to change the size of the logo? Thanks in advance!
The blog I need help with is: (visible only to logged in users)
-
Hi there, looking at your logo, I’m assuming you want it larger. Add the following to your custom CSS and you can adjust the 500px max width as desired.
.site-branding .custom-logo-link img { max-width: 500px; max-height: initial; width: 100%; } -
Howdy fehzan0704!
Try this CSS snippet for the logo.site-branding .custom-logo-link img { max-height: 150px; max-width: 400px; }The max height, max width values can be adjusted as per your needs. Let me know how this goes..!
-
-
-
Thank you so much both of you my good men! Amazing community here and the people are amazing! Thanks again for that quick reply!
-
@thesacredpath : Good Morning, Hope you having a wonderful day :)
@fehzan0704 : Glad we could help you! Let us know for anything else..! :)
-
@pavanraheja why does my website look different on my real phone and on the phone tab on the WordPress site? on my phone the menu isn’t underneath the logo, its to the right. But on the phone tab on WordPress its underneath. How do I fix that?
-
Hi Again!
Yes, I could see it on a Tablet, the Menu is on the Right and when clicked it gets opened below, so you want it to be aligned that the Menu should go underneath and display there itself and the Logo and other data above it, ie like the Phone Tab? Just confirm it, it needs a Media Query adjustment, I ll give it a try or be assured @thesacredpath will surely update you. Just confirm what you are trying to achieve, so the solution can be figured. -
I just did some checking and found out its right on snaller phones but on my s8+ and iphone 7plus its wrong. Maybe somethibg to do with screen sizes and how wordpress registers them, maybe they think its a tablet? U know how to fix that maybe?
-
Hi again!
Yeah, it’s completely to do with the screen size, the media queries come into play, I could not get a perfect solution but just try this@media screen and (max-width: 960px) { button.menu-toggle { position: relative; margin-left : 33% ; } header#masthead.site-header { padding: 1 rem ; } }I just moved the Menu below with changing its position and centered it with the margin.
Also, as the block was not getting fit correctly added some padding.
Anyways, see if that works, or else just wait for @thesacredpath
He will try to get you much better alignments. -
Yeh that worked perfectly for bigger screens even tho I did some editing myself and figured out something that works for bigger screens but how do I make it so its different for different phone sizes. Here you can see some screenshots from an iPhone 7 and an iPhone 7 plus. Its perfect on the 7 plus but I want it to be like it was before on the iPhone 7. I belive I have to make 2 different codes to make it for both phones. There are pictures added in the post and if your wondering how I want to have it let me know if you didn’t already get it. Thanks in advance.
iPhone 7: http://imgur.com/ezijgWF
iPhone 7 Plus: http://imgur.com/LzOqZwz -
This is a bit “hacky”, but add this to the bottom of your custom CSS and see what you think.
@media screen and (max-width: 400px) { .site-branding .custom-logo-link img { max-width: 200px; } .site-branding .custom-logo-link { text-align: left; display: inline-block; max-width: 200px; } .site-branding, #site-navigation { width: auto; display: inline-block; } }
- The topic ‘Changing size of the logo’ is closed to new replies.
WordPress.com Forums 