Logo Size

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


Comments

  • 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.
  • 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/
  • edited July 2015
    Here you go: http:// life-wise.co.za /
  • @ChapterSeven So to increase logo size, use below css:
    1. .header-plain #Top_bar #logo { height: 100px !important; }
  • 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


    Regards

    Gurpreet

  • @Gurpreetsaggu If you want to use the code for larger screens only, then please wrap your code into @media only screen css:
    1. @media only screen and (max-width: 1239px) { YOUR CODE HERE }
  • 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 ?

  • 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.
  • 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
  • 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:
    1. @media only screen and (min-width: 1240px) { .header-creative #Top_bar #logo { height: 50px !important; }
  • Hi there, I tried the code you gave me, 

    logo is smaller again 
  • 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.
  • 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 ?
  • Hi,

    the url you sent does not work unfortunately. Site keeps loading and nothing happen.
  • Its working fine here. Please try again
  • 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.
  • 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? 

  • 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.
  • 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 ?
  • 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; }}
  • 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.
Sign In or Register to comment.