Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 28, 2014 at 9:45 am #244265
    Cum_Vincere

    Hello,

    We would like if possible to make two adjustments on the logo CSS in the smartphone version:

    1) allocate a slightly wider surface for logo, as a portion of the right part of it is not visible (about 40px are covered).

    2) shift down the dropdown menu, because at the moment it covers the bottom part of the logo (about 30px).

    I have made a screenshot which can explain this better. Can I mail it to you? If so, to which address?

    Thank you!

    March 28, 2014 at 4:26 pm #244448
    Yigit

    Hey Cum_Vincere!

    You can upload screenshots on imgur.com or dropbox public folder and post the links here. Please also post the link to your website so we can take a look

    Best regards,
    Yigit

    April 9, 2014 at 9:01 am #249164
    Cum_Vincere
    This reply has been marked as private.
    April 10, 2014 at 6:28 pm #249876
    Yigit

    Hi!

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

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

    If that does not help, please post the link to your website.

    Cheers!
    Yigit

    April 11, 2014 at 6:32 pm #250330
    Cum_Vincere
    This reply has been marked as private.
    April 12, 2014 at 3:01 am #250411
    Ismael

    Hey!

    Please use this:

    @media only screen and (max-width: 767px) {
.responsive #top .mobileMenu {
margin: 20px 0 10px 0;
width: 100%;
padding: 10px 4px;
}

.responsive .logo {
position: static;
height: 90px;
float: none;
}
}

    I hope that helps.

    Regards,
    Ismael

    April 14, 2014 at 9:14 am #250951
    Cum_Vincere

    Hello Ismael, thank you (and Yigit) for your help.

    Now it works. This is the full code, just in case anyone can need it:

    /* CORRECTION ON MOBILE LOGO */

    @media only screen and (max-width: 480px) {
    .responsive .logo a, .responsive .logo img {
    max-width: 100% !important;
    height: auto!important; }}

    @media only screen and (max-width: 767px) {
    .responsive #top .mobileMenu {
    margin: 20px 0 10px 0;
    width: 100%;
    padding: 10px 4px;
    }

    .responsive .logo {
    position: static;
    height: 90px;
    float: none;
    }
    }

    I just made a bit of fine tuning on line 3 from:

    max-width: 80%;

    to:

    max-width: 100% !important;

    because a part of the right side of the logo was cut.

    I hope this does not affect other devices. At the moment I have only tested it on a Samsung / Android device and soon I will also check it on a iPhone.

    April 14, 2014 at 2:00 pm #251054
    Ismael

    Hey!

    Glad it is working now. I hope it is ok iPhone. :)

    Regards,
    Ismael

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.