Logo Size

Gurpreetsaggu · July 2015

Hi there,

I am having a logo size issue. I tried using all different header options, none of them worked for my logo size 366 x 234. except stack centre. It shows the logo's real size.

Tried header creative always open, Resized the logo 158 x 101, copied the logo used in bedent layout to check if there is size problem. but it wasn't showing the same size like its showing in the demo. on my page,

Please advice, how can I make my logo to look filled with the page using creative always. How can I send screenshot ?

Regards

Gurpreet

ChapterSeven · July 2015

Hi, I am also having the same issue. The logo I need to use is an odd shape/size.

Ideally I would like my logo to display: + - 100px - 110px (height) on the top navigation.

Looking forward to your feedback.

Albert · July 2015

Hi,

please send us url to site where you want to increase logo size and we'll have a look on it. But to send us screenshot, you can use for example http://pasteboard.co/

ChapterSeven · July 2015

Here you go: http:// life-wise.co.za /

Albert · July 2015

@ChapterSeven So to increase logo size, use below css:

.header-plain #Top_bar #logo { height: 100px !important; }

Gurpreetsaggu · July 2015

Hi there, Thank you for the reply.

After resizing the logo, I tried .header-creative #Top_bar #logo { height: 160px !important; }

And logo size has increased on desktop, some of the tablets, problem is when I see it on mobile , or other resolutions, the logo is too small , leaving margin between logo and slider looks bit is cut off .

Here are the screenshots links.

http://pasteboard.co/2jMVRtiW.jpg -logo & header issue on mobile

http://pasteboard.co/2jN0VoB8.jpg- logo and header issue on tablet

http://pasteboard.co/2jO2fwgx.jpg -slider issue

Regards

Gurpreet

Albert · July 2015

@Gurpreetsaggu If you want to use the code for larger screens only, then please wrap your code into @media only screen css:

@media only screen and (max-width: 1239px) { YOUR CODE HERE }

Gurpreetsaggu · July 2015

Sorry ! I didn't get it. which code do I need to put in @media only screen and (max-width: 1239px) { YOUR CODE HERE } and what is the solutions to the cut off slider ?

http://pasteboard.co/2jO2fwgx.jpg -slider issue

Thanks

Albert · July 2015

We should ask you which code you want to use? Because we have no idea what are you trying to do. If you wrote in this topic, then probably you are planning to use the code we left above. So you should use the code we left above inside. But if you don't know how, then we recommend to have a look at http://betheme.muffingroupsc.netdna-cdn.com/betheme/wp-content/themes/betheme/css/responsive.css where you can see how css works.

Gurpreetsaggu · August 2015

I have used the following codes

I think , its all sorted. Can you please advice , if I have missed any code ?

.header-creative #Top_bar #logo { height: 151px !important; }

@media only screen and (max-width: 1239px) { .header-creative #Top_bar #logo { height: 50px !important; }

Thanks

Albert · August 2015

We did a small mistake because instead of max-width should be min-width if you want to use this code for larger screens only. So the code should be:

@media only screen and (min-width: 1240px) { .header-creative #Top_bar #logo { height: 50px !important; }

Gurpreetsaggu · August 2015

Hi there, I tried the code you gave me,

logo is smaller again

Albert · August 2015

So this is exactly what for this code is. This code makes logo smaller on screens larger then 1240px. If you want to do something else then switch between max-width and min-width and set right values for them. BTW What is the url to site where you are playing with this logo? Because at this moment we have no idea what you did exactly.

Gurpreetsaggu · August 2015

Here is the link http://www.treeoforganics.co.uk/

Gurpreetsaggu · August 2015

I am using the @media only screen and (max-width: 1239px) { .header-creative #Top_bar #logo { height: 50px !important; } right now,

as with min-width logo size become too small, even on desktop.

So, tell me, is that right to use this code ?

Albert · August 2015

Hi,

the url you sent does not work unfortunately. Site keeps loading and nothing happen.

Gurpreetsaggu · August 2015

Its working fine here. Please try again

Albert · August 2015

Ok, now it works. But as we see, empty spaces are no longer there and everything looks fine. We do not see anything wrong now. So what else you want to do? Because for us all is fine now.

Gurpreetsaggu · August 2015

I used these .header-creative #Top_bar #logo { height: 151px !important; }

@media only screen and (max-width: 1239px) { .header-creative #Top_bar #logo { height: 50px !important; }

I asked a question, if these code enough or Did I miss anything else?

and then support gave me @media only screen and (min-width: 1240px) { .header-creative #Top_bar #logo { height: 50px !important; } by using this code, logo was leaving space between menu and logo .

I want to confirm , why support gave me this code?

Albert · August 2015

We gave you this code because this is the only code that decrease logo height on screens larger then 1240px. This was the best option to remove that space under the logo as we remember. But because this topic is too long and you changed to much already we do not remember if there was any other reason why we gave you this code.

Gurpreetsaggu · August 2015

I wrote every single time,what changes I made,

Once again here is the story to avoid to look back: I uploaded my logo, which didn't fit in mobile view, was showing too much space between logo and menu ,(of course logo is big in size.) so I asked for your help.

I got a clue from one of your reply to ChapterSeven on my thread

Writing here AGAIN , I pasted two codes

.header-creative #Top_bar #logo { height: 151px !important; }

@media only screen and (max-width: 1239px) { .header-creative #Top_bar #logo { height: 50px !important; }

Support gave me another code: which shows min-width instead of max-width, which didn't work to solve the problem.

Which is this right way to decrease logo height from all resolution less than 1240 ?

How much clear do you want me to ask ?

Gurpreetsaggu · August 2015

How to make logo size bigger ?

using the following didn't work ,

.header-creative #Top_bar #logo { height: 151px !important; }

@media only screen and (min-width: 1240px) { .header-creative #Top_bar #logo { height: 50px !important; }}

the only way it makes the logo size bigger when I am using @media only screen and (max-width: 1239px) { .header-creative #Top_bar #logo { height: 50px !important; }}

Albert · August 2015

You asked:

Which is this right way to decrease logo height from all resolution less than 1240 ?

but our answer was:

@media only screen and (max-width: 1239px) { .header-creative #Top_bar #logo { height: 50px !important; }

This is the css responsible for decreasing logo height on screens smaller then 1240px.

P.S. From our side this can not be clearer explained as well. We explained this as easy as was possible.

Gurpreetsaggu · August 2015

Thank You

Albert · August 2015

You're welcome!

Logo Size

Comments