Tagged: , ,

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • May 6, 2014 at 4:10 am #260546
    May 6, 2014 at 4:00 pm #260778
    Yigit

    Hey happinessplunge!

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

    @media only screen and (max-width: 767px) {
.responsive .logo a, .responsive .logo img {
max-width: 85%;
height: auto !important;
margin-top: 5px!important;
}}

    then go to Enfold theme options > Header Layout > Mobile Menu > Header Mobile Menu activation and choose 990px
    Cheers!
    Yigit

    May 6, 2014 at 8:45 pm #260926
    happinessplunge

    Thanks for your help and for the code.

    I added the code to QuickCSS and changed from 768 to 990px and the result is exactly the same as you can see here: http://mobiletest.me/iphone_5_emulator/#u=http://adampervez.com

    Any other thoughts?

    May 6, 2014 at 9:26 pm #260937
    Yigit

    Hi!

    I have just checked your website on my iphone 4 and this is how it looks on my end – http://i.imgur.com/mftx74r.png
    Please flush browser cache on your mobile device

    Best regards,
    Yigit

    May 6, 2014 at 10:11 pm #260971
    happinessplunge

    Thanks! I cleared the cache for my browser (Chrome for Android) and here’s how it looks on my end. Same problem.
    [IMG]http://i.imgur.com/aLQytTd.png[/IMG]

    Also, the social icons are messed up at the top on both mobile and desktop browsing.

    Any further thoughts?

    Thanks,

    May 6, 2014 at 10:13 pm #260973
    Yigit

    Hey!

    I believe you are still seeing cached version. However you can decrease max-width value in code i posted here to make your logo smaller – https://kriesi.at/support/topic/menu-covers-logo-on-mobile/#post-260778

    Regards,
    Yigit

    May 7, 2014 at 2:30 am #261034
    happinessplunge

    Hi Yigit,

    I tried loading my site on a different phone, one that has never visited my site. Same problem remains. I installed Firefox for my phone and it also showed the same problem. At least the social icons are displaying correctly.
    On a Nexus 5 using Firefox
    screenshot

    On an iPhone 4s using Safari
    http://imgur.com/5PWHlRG

    May 7, 2014 at 2:32 am #261035
    happinessplunge

    On a Nexus 5 using Firefox image that works this time:
    http://imgur.com/qlV47PK

    May 7, 2014 at 11:43 am #261251
    Yigit

    Hey!
    Have you tried adjusting max-width value i posted here – https://kriesi.at/support/topic/menu-covers-logo-on-mobile/#post-260778 ?
    I still see your logo fine on my iphone 4

    Best regards,
    Yigit

    May 7, 2014 at 10:00 pm #261514
    happinessplunge

    Yes, I tried adjusting the max width value as well as changing the max width to 50% for example. Still not working on a Nexus 5, iPhone 4s, and emulators like this.

    If it can’t be fixed I can live with that. I just wish the drop down menu still existed.

    May 8, 2014 at 7:01 pm #261935
    Yigit

    Hey!

    I have asked @josue to take a look at your website on his mobile device. Problem seems to be fixed on my end, if it works fine on his end also, there is not much we can do as long as we cannot reproduce the issue.
    Let us wait for his answer

    Cheers!
    Yigit

    May 10, 2014 at 4:20 am #262703
    happinessplunge

    Ok, let’s see what @josue sees then. Thanks again for your help!

    May 12, 2014 at 3:41 am #263081
    Ismael

    Hi!

    Thank you for using the theme!

    I checked the website on Chrome Windows 8, resize the browser screen and the logo is very small. Did you modify the css codes suggested above? 

    @media only screen and (max-width: 767px) {
.responsive .logo a, .responsive .logo img {
max-width: 85%;
height: auto!important;
margin-top: 5px!important;
}
}

    If that doesn’t work, please add this below the code above:

    @media only screen and (max-width: 767px) {
.avia-android .logo a, .avia-android .logo img, .avia-iphone .logo a, .avia-iphone .logo img {
max-width: 43%;
height: auto!important;
margin-top: 5px!important;
}
}

    Cheers!
    Ismael

    May 13, 2014 at 11:29 pm #264321
    happinessplunge

    Thanks so much, Isamel!

    That fixed it. Great news!

    Last thing now. Is there a way to change the total height of the header on mobile then? I tried using the code below but it doesn’t work.

    
@media only screen and (max-width: 767px) {
.responsive .logo a, .responsive .logo img {
max-width: 85%;
height: auto!important;
margin-top: 5px!important;
}
#header_main {height: 100px !important;}
}

    Thanks!

    May 13, 2014 at 11:34 pm #264325
    Yigit

    Hey!

    Seems like you have already figured it out – http://i.imgur.com/hpyLt1R.png
    Let us know if you have any other questions or issues

    Cheers!
    Yigit

    May 15, 2014 at 2:41 am #265020
    happinessplunge

    Thanks! I was thinking of changing my logo, that’s why I was asking about the height thing. The part I added “#header_main {height: 100px !important;}” doesn’t seem to impact the header. Should the code be different?

    Thanks.

    May 15, 2014 at 9:55 pm #265525
    Yigit

    Hi!

    With media queries it should work. So the code should be as following

    @media only screen and (max-width: 480px) {
#header_main {
height: 120px!important; }}

    Please note that currently you have following code added in Quick CSS

    #header_main {
height: 73px!important;
margin-top: -10px!important;
margin-bottom: -10px!important;
}

    and that would stop new code from applying because of !important rule you have there

    Cheers!
    Yigit

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