Logo Size


#1

Hi,

I just uploaded my logo, but as you can see it’s really tiny. I’ve gone through the threads and tried some of the CSS codes suggested, but they aren’t working. If I try and increase the size of the logo in paint, then the file is uploaded with a white background.

I’d appreciate help with increasing my logo size:

P.S. Is it possible to remove the white background from my favicon?


#2

Dear Davina,

  1. Your logo appears so tiny because it contains lot of space around it, please crop it keeping transparency (to avoid white background). Also, after cropping, I suggest you to make sure that its height is about 200px, because now it is of very high resolution.

  2. To remove the white background from your favicon you have to create it again with transparency instead of white background.

Let me know if you have any other questions :slight_smile:

Kind Regards, Roman.


#3

Hi Roman,

I cropped the picture and kept the transparency. The dimensions are 787x192, however, I would like to make it slightly larger. Any suggestions?

Secondly, I removed the transparency from the favicon, however, when I uploaded it, the background was black even though the image I uploaded has a transparent background.


#4
  1. I suggest you to crop logo even more (remove margins at all).

  2. What format are you using for favicon (it should be favicon.ico or favicon.png)? And how do you upload it? What browser are you using?

Kind Regards, Roman.


#5

P.S. Is there any way to align the logo with the menu items and the slider text? (horizontally and vertically respectively).


#6

I’ve removed all margins for the logo. And the favicon is gif (the application I’m using to create the transparency only saves in gif). I’m using Google Chrome.


#7

Hi Roman,

I converted the favicon to png and now it is fully transparent…I’m also fine with the logo size, so it’s just the alignment issue that is remaining.


#8

Okay Davina,

You can align your logo and menu with this CSS code:

.site-logo {
    margin-left: -33px;
}

#mainnav {
   margin-top: 28px;
   margin-right: -36px;
}

You can add it to your child theme’s style.css or with Simple Custom CSS plugin.

Hope it helps :slight_smile:

Kind Regards, Roman.


#9

You can apply it only for home page using this code:

.home .blog .site-logo {
    margin-left: -33px;
}

.home .blog #mainnav {
   margin-top: 28px;
   margin-right: -36px;
}

#10

Thanks for all your help Roman. I added the code but the logo hasn’t shifted. Maybe its current position is as far as it can move.


#11

Hello Davina,

You can change -33px to bigger value just to make sure if it works or not.

Sincerely, Roman.


#12

Hi Roman,

I changed the value but the logo remains in place. Is there any other code which could work? My focus is on the homepage.


#13

Please try this:

.home .site-logo {
    margin-left: -33px;
}

If it doesn’t work, please tell me how do you add the code.


#14

That code worked perfectly, the logo is now slightly to the left on the homepage. Any code for moving it up so that it can be in line with the page titles?

P.S. Can I use a variation of the code provided above to move the logo slightly to the left on the categories page?


#15

You can move your logo up by adding some negative value of margin-top like this:

.home .site-logo {
    margin-left: -33px;
    margin-top: -30px;
}

P. S.
Yes, you can use this code for other pages by changing .home to class with proper page ID.


#16

Hi Roman, this worked perfectly. I changed the values and the class, and now the logo is positioned the way I wanted it to. Thank you for all your help. Have a great weekend :slight_smile:


#17

Thank you, have a nice weekend as well! :slight_smile:

I’m happy to hear that you achieved your goal.

Feel free to ask any other questions that you might have in future.

Kind Regards, Roman.