Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • July 6, 2017 at 8:02 pm #817484
    dvus4l

    I am currently building this site

    I have a code implemented into the custom css to show the logo at max size, however on mobile it is stretched and not conforming properly. Is there a mobile only code I can add to custom css so that it is normal size there?

    Thank you in advance

    July 7, 2017 at 10:23 am #817723
    Sarah

    Hey dvus4l,

    You can put that custom CSS (which shows the logo at max size) inside this:

    @media screen and (min-device-width: 1024px) {
   YOUR CODE HERE 
}

    This way it will only apply for desktops, and the normal size will appear on mobile.

    For more info on media queries, please see this reference: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    I hope that helps!

    Best regards,
    Sarah

    July 7, 2017 at 11:13 pm #818029
    dvus4l

    Hi Sarah

    Thank you for this – curious, what code would I place in the YOUR CODE HERE to ensure the mobile logo responds normally? If you can – check out how the site currently appears on mobile. Perhaps that may help with figuring out the correct solution.

    Thank you in advance

    July 8, 2017 at 5:57 am #818070
    Sarah

    Hi,

    Ah, sorry, I’ll clarify. You cais that you have a code implemented into the custom css to show the logo at max size. This is the code that you will put in “YOUR CODE HERE”. This will restrict the change to desktops only, so that the normal size appears on mobile.

    I hope that’s more clear! :)

    Best regards,
    Sarah

    July 16, 2017 at 11:13 pm #822220
    dvus4l

    Hi Sarah,

    I have done as instructed with zero results. The logo is still much too large on mobile

    July 17, 2017 at 10:13 am #822468
    Jordan Shannon

    Hi,

    Would you be able to provide dashboard login info so we can log in and look into this issue further? Perhaps there is a current css error that may be preventing Sarah’s css from running.

    Best regards,
    Jordan Shannon

    July 17, 2017 at 7:08 pm #822827
    dvus4l

    Hi Jordan,

    Please see in private

    Thank you in advance

    July 17, 2017 at 8:57 pm #822923
    Jordan Shannon

    Hi,

    Which code did you originally add to adjust the logo?

    Best regards,
    Jordan Shannon

    July 19, 2017 at 7:13 pm #824119
    dvus4l

    Jordan,

    This is the original code .logo {height: 68px!important; max-height: 68px!important; width: 750px!important;}

    This is the code I had been instructed to include for the mobile `@media screen and (min-device-width: 1024px) {
    .logo {height: 68px!important; max-height: 68px!important; width: 750px!important;}
    }`

    Thank you in advance

    July 19, 2017 at 8:57 pm #824152
    Jordan Shannon

    Hi,

    Add the following to quick css:

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

}

    Best regards,
    Jordan Shannon

    July 31, 2017 at 7:01 pm #832350
    dvus4l

    Hi Jordan,

    Firstly – thank you. Secondly, While the size did adjust – it is sitting a bit awkward on the mobile version. Is there a way to not only make it just slightly bigger, but to center it in that space? – I am not suggesting centering it on mobile, I’m speaking centering it vertically.

    Thank you in advance

    July 31, 2017 at 8:42 pm #832398
    Jordan Shannon

    Hi,

    Try to adjust the percentage and margin:

    @media only screen and (max-width: 767px)  {
.responsive .logo img {
max-width: 35%!important;
margin-top:-20px!important; 
}
}

    Best regards,
    Jordan Shannon

    August 2, 2017 at 6:50 pm #833591
    dvus4l

    Jordan,

    This is solved. Thank you again for your stellar assistance

    August 2, 2017 at 10:29 pm #833651
    Jordan Shannon

    Hi,

    No problem at all. I’m glad I was able to help you with this. If you need further assistance, please let us know in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Max Size logo on desktop – Too big on mobile’ is closed to new replies.