Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • December 8, 2013 at 10:09 pm #197785
    p_niedrich

    Hi,

    I use a bigger logo. I didn’t add any css, but it is displayed perfectly most of the time. Just when I reduce the width of the browser window, simulating a mobile display, the “o” of “BerlinGuitarTrio” is cut.

    The png file i use is 425 × 156px. However, it is automatically displayed at 289 * 116 which I perfectly like.

    I read through the several threads concerning this topic but didn’t find a solution. I tried out this code (as well with 425 × 156px)

    .logo, .logo a, .logo a img {
    width: 289px;
    height: 116px;
    }

    but that didn’t solve my problem.

    Thanks for your help and best regards
    Philipp

    December 8, 2013 at 11:14 pm #197815
    Yigit

    Hi p_niedrich!

    Can you post the link to your website so we can provide you accurate custom CSS?

    Best regards,
    Yigit

    December 8, 2013 at 11:16 pm #197816
    p_niedrich

    Hi Yigit,

    http://berlinguitartrio.de/?page_id=2317

    Regards
    Philipp

    December 8, 2013 at 11:20 pm #197817
    Yigit

    Hey!

    Please add following code to Quick CSS in Enfold theme options under Styling tab

    @media only screen and (max-width: 480px) {.logo, .logo a, .logo img { max-height: 108px; }

    And flush browser cache and refresh your page a few times

    Cheers!
    Yigit

    • This reply was modified 10 years, 4 months ago by Yigit.
    December 8, 2013 at 11:46 pm #197822
    p_niedrich

    Unfortunately that made it even worse, since the logo gets cut in two ways now. Still at the right side, but now as well on the bottom. But you are on the right way I guess. I modified the code and that helped:

    @media only screen and (max-width: 480px) {.logo, .logo a, .logo img { max-height: 116px; min-width: 289px; }

    Now the whole “BerlinGuitarTrio” is displayed. I’m almost satisfied, but the text is unfortunately a bit wider than the responsive menu (268px). I would love them to lign up to each other. Or to center the “BerlinGuitarTrio”. I tried that by adding position:absolute; left: – 10px;, but that only cut the logo on the left ;)

    Regards
    Philipp

    December 9, 2013 at 6:03 am #197921
    Ismael

    Hi!

    Please add this on your custom.css or Quick CSS:

    @media only screen and (max-width: 767px) {
.responsive .logo img {
margin: 0 auto;
max-width: 200px !important;
min-width: 200px !important;
position: relative;
left: -5px;
}
}

    Remove browser cache then reload the page.

    Regards,
    Ismael

    December 10, 2013 at 11:23 am #198480
    p_niedrich

    Hi Ismael,

    your code works perfectly, thanks :)

    There is just one little problem left:
    On my monitor the logo-size switches at certain window sizes. One switch is at 767px (is fine, due to your code), another one is around 990px.

    Between 990px and 767px the logo is 221px width, which is a bit too much, 200 would be better, and the main problem is, that the vertical align is not in the middle, what looks pretty bad.

    Thanks for your help and best regards
    Philipp

    December 10, 2013 at 1:26 pm #198524
    Yigit

    Hi!

    Please add following code to Quick CSS as well 

    @media only screen and (min-width: 767px) and (max-width: 990px) { .logo, .logo a, .logo img { max-width: 200px; }
.logo img { margin-top: 10px; }}

    Regards,
    Yigit

    December 12, 2013 at 9:10 am #199390
    p_niedrich

    Hi Yigit,

    the code works fine, when I start with a bigger browser window (>990) and then reduce it. But when the window is smaller (<767px) in the beginning and I start to make it bigger, the logo gets cut on the right side…

    Regards Philipp

    December 12, 2013 at 2:44 pm #199485
    Dude

    Hey!

    I think the min-width value of the media query causes the issue – try following code instead

    
@media only screen and (min-width: 1px)  and (max-width: 990px) { .logo, .logo a, .logo img { max-width: 200px; }
.logo img { margin-top: 10px; }
}

    Best regards,
    Peter

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Bigger Logo gets cut’ is closed to new replies.