Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • September 10, 2014 at 12:31 pm #316460
    C_Developer

    Hi there!

    I’ve been testing my header on various display sizes.
    The header is responsive on various computer display sizes but not on phone display sizes: the size of the logo does not get smaller when displays are smaller, resulting in the logo being cut halfway instead of being shown entirely.

    Is there a way to force the logo to fit in the width of the browser window?

    Thank you!!

    CB

    September 10, 2014 at 12:38 pm #316467
    Yigit

    Hey CB!

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

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

    Best regards,
    Yigit

    September 10, 2014 at 12:47 pm #316478
    C_Developer

    Hi Yigit,

    I didn’t notice any difference. The logo is still not showing entirely on all mobile phone displays.

    Can we try anything else?

    Thx!

    CB

    September 10, 2014 at 12:50 pm #316482
    Yigit

    Hey!

    Please flush browser cache on your mobile device and refresh your page a few times. It does work fine on my end now.

    Regards,
    Yigit

    September 10, 2014 at 12:59 pm #316498
    C_Developer

    Hi Yigit,

    Emptied cache and checked again. What do you think of that?

    Google Chrome and Safari :
    Elements still overlapping when width between 480px and 760px.

    Firefox :
    width 600px : Menu still floating on top of logo
    width 790px : Social Media icons still floating atop of logo

    Best,

    CB

    September 10, 2014 at 1:06 pm #316506
    Yigit

    Hi!

    Have you tried checking your website on an actual mobile device? This is how it looks on my iPhone 4 – http://imgur.com/a/tiHcq
    You can see screenshot from both landscape and portrait modes

    Cheers!
    Yigit

    September 10, 2014 at 1:17 pm #316518
    C_Developer

    Hi!

    No, I haven’t and I’m glad that it does display properly on your iPhone.

    Actually, I was resizing the browser on my iMac and the layout still doesn’t adapt very well in these cases:
    – when the width on Firefox is made smaller than 990px, the icons are overlapping the logo.
    – when the width on Chrome and Safari is made smaller than 766px, the logo is not shown entirely (the end of the name is missing – did you notice?).

    Thank you!

    CB

    September 10, 2014 at 4:25 pm #316717
    Yigit

    Hey!

    Please add following code to Quick CSS as well

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

    Best regards,
    Yigit

    September 10, 2014 at 11:38 pm #317019
    C_Developer

    Hi Yigit!

    Thank you for your patience. :-)
    I did add your code it but it’s still not working:

    on Chrome/Safari
    – when the window is between 480px and 760px, the social media icons are overlapping
    – when the window is smaller than 480px, the “T” of the name is hidden by the mobile menu

    on Firefox
    – when the window is between 480px and 760px, the “T” of the name is hidden by the mobile menu
    – when the window is smaller than 480px, the logo is hidden by the menu and the logo doesn’t fit in the window

    Thank you,
    Cheers

    CB

    September 11, 2014 at 7:18 pm #317593
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 767px) {
.responsive.html_header_top #header_main .social_bookmarks {
top: 15px;
}}

    and change “max-width: 90%;” in the previous code i posted to “max-width: 85%;”
    Cheers!
    Yigit

    September 11, 2014 at 9:00 pm #317633
    C_Developer

    Hi Yigit,

    Thank you! It’s a lot better than at the beginning!

    My last doubt is for the smallest displays. Does it display properly on your iPhone or is the mobile menu overlapping the logo?

    Best thanks!
    CB

    September 11, 2014 at 9:58 pm #317651
    Yigit

    Hi!

    I wanted to check and post you screenshots but link you posted in your first post directs to landing page :)

    Cheers!
    Yigit

    September 11, 2014 at 11:39 pm #317688
    C_Developer
    This reply has been marked as private.
    September 12, 2014 at 12:30 pm #318035
    Yigit

    Hey CB!

    Just checked your website on my iphone and this is how it looks on my end – http://imgur.com/a/fGqLJ
    Looks good. If you would like to move logo a bit down, please add following code to Quick CSS and adjust as needed

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

    Regards,
    Yigit

    September 12, 2014 at 5:52 pm #318226
    C_Developer

    Hi Yigit!

    WOW, amazing, now you’ve done an amazing job!! Thank you so much!!
    So, I stick to your code with 6px margin, it’s looking great like this.

    Thank you very much!!
    Warm regards,

    CB

    September 12, 2014 at 5:54 pm #318229
    Yigit

    Hey!

    You are welcome CB, always glad to help :)
    Let us know if you have any other questions or issues and have a nice weekend!

    Best regards,
    Yigit

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Logo does not shrink on smaller displays’ is closed to new replies.