Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • March 10, 2014 at 1:37 am #234454
    stacyr311

    Hi there – we’re almost ready to go live but noticed that our logo isn’t sizing right in mobile view. I use custom CSS to re-size our logo to 370×120. I found another user here that had the same issue, so I used the code the moderators offered:

    @media only screen and (max-width: 767px) {
.responsive .logo {
height: 200px;
}

@media only screen and (max-width: 480px) {
.logo, .logo img {
max-width: 280px!important;
}}

    Now, when holding the phone in landscape mode, the logo looks fine and isn’t stretched. But when holding in portrait mode, the logo is still cut off. The second clip of CSS fixed the other user’s issue, but it did not fix mine. Any suggestions?

    http://www.fpcosms.com/fpcnew

    March 10, 2014 at 1:58 pm #234685
    Ismael

    Hey stacyr311!

    How are you? I hope you’re doing well today.

    Please add this below:

    @media only screen and (max-width: 480px) {
.responsive .logo img {
margin: 0;
max-width: 100%;
}
}

    Cheers!
    Ismael

    March 10, 2014 at 3:44 pm #234751
    stacyr311

    Hi Ismael,

    Unfortunately, that code didn’t work for me. Logo is still cut off in responsive. Any other suggestions?

    March 10, 2014 at 3:49 pm #234755
    Yigit

    Hey!

    Please flush browser cache and refresh your page a few times. It seems like Ismael’s code works fine

    Cheers!
    Yigit

    March 10, 2014 at 4:12 pm #234770
    stacyr311

    Yigit,

    I cleared the cache three times and the logo is still cutting off on the “I” in Presybterian. It looks fine when holding my phone in landscape…but in portrait is where it’s cut off. I’m using Safari on an iPhone 4S.

    March 10, 2014 at 7:49 pm #234922
    Yigit

    Hey!

    Please add following code to Quick CSS 

    @media only screen and (max-width: 480px) { 
.responsive .logo img {
max-width: 80%!important;
}}

    If that does not work, please check your custom CSS in Quick CSS, there may have been an issue

    Cheers!
    Yigit

    March 11, 2014 at 3:42 am #235147
    stacyr311

    Hmmm…it still didn’t work for me. Here’s the custom CSS that I used for 1) changing the size of the logo in the header 2) fixing the stretched logo in mobile view and 3) I think the other CSS was because the responsive menu was showing up on IE11 on my boss’ PC.

    .logo, .logo a, .logo img { width: 370px !important; height: 120px !important; max-width: 370px !important;}

@media only screen and (max-width: 767px) {
.responsive .logo {
height: 200px;
}

@media only screen and (min-width: 990px) {
#avia-menu {
display: block !important;
}

#mobileMenu_avia-menu {
display: none !important;
}
}

@media only screen and (max-width: 480px) { 
.responsive .logo img {
max-width: 80%!important;
}}
    March 11, 2014 at 3:38 pm #235541
    Yigit

    Hey!

    There is a curly bracket missing in your code. I have added them, please use following code

    .logo, .logo a, .logo img { width: 370px !important; height: 120px !important; max-width: 370px !important;}

@media only screen and (max-width: 767px) {
.responsive .logo {
height: 200px;
}}

@media only screen and (min-width: 990px) {
#avia-menu {
display: block !important;
}

#mobileMenu_avia-menu {
display: none !important;
}
}

@media only screen and (max-width: 480px) { 
.responsive .logo img {
max-width: 80%!important;
}}

    Best regards,
    Yigit

    March 11, 2014 at 11:58 pm #235989
    stacyr311

    I replaced the code, cleared the cache a few times on my browser (Safari – iPhone 4S – iOS6) and it’s still cut off in portrait mode. I looked on a couple other devices (all iPhones) who have never looked at the site and it was cut off on theirs, too. Any other suggestions on what could fix this?

    March 12, 2014 at 3:41 pm #236355
    Yigit

    Hi!

    Do you mind creating a temporary admin login and posting it here privately so i can take a look?

    Best regards,
    Yigit

    March 12, 2014 at 5:09 pm #236396
    stacyr311
    This reply has been marked as private.
    March 13, 2014 at 4:14 pm #237005
    stacyr311

    Hi Yigit,

    Were you able to look at the Quick CSS? I’m trying to put the site live within the hour, so I didn’t want to be doing that if you were logged in. Please let me know.

    Thanks,
    Stacy

    March 13, 2014 at 4:23 pm #237010
    Yigit

    Hi!

    I have just logged in and fixed mobile menu issue and logo on mobile and checked it on my iphone. This is how it looks on my end http://i.imgur.com/RJO9hR7.png
    You can find custom CSS code i added on the top of Quick CSS section.

    Regards,
    Yigit

    March 13, 2014 at 4:36 pm #237022
    stacyr311

    Great! Thank you so much – it is working on my end as well now! I appreciate your help!

    March 13, 2014 at 4:38 pm #237024
    Yigit

    Hey!

    You are welcome Stacy, glad we could help!

    Cheers!
    Yigit

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Issue with Logo in Mobile View’ is closed to new replies.