Okay
  Public Ticket #1766063
Mobile and desktop design
Closed

Comments

  • eyal1986 started the conversation

    Hello, 

    I am not getting response for my open ticket so i am opening a new one sadly. 

    Here is a copy paste of my last correspondence with a guy name nick: 

    Hi Nick,

    Would like to first of all thank you for taking the time and answer my ticket. 

    Ill reply in two parts, one for mobile version and one for desktop since i see they are related but also not in a weird way.

    Mobile:

    I added the css code you sent and indeed i was able to edit to width of the button. i tried to apply the same code for height and unfortunately it did not work properly.

    I added a mockup per your request so you can see my wanted end result. please notice in the mockup that the llama (my logo) ears are not cut off as it is at the moment, it is also aligned to the upper left hand side of the button. 

    Desktop:

    The top menu is not aligned with the logo (or the other way around) the way i would like it to be. 

    I attached a mockup again to show what would be a good end result for me and would like to know how to go about it. 

    It seems like the mobile version and desktop versions are detached somehow. 

    I can not for example set the logo size for mobile version without adjusting the desktop version.quit frustrating uinless i am missing something.

    One more thing that maybe you can advise, my website, logo and design in general looks completely different in firefox browser then they appear in google chrome.

    Again thank you for your time and patience. 

    Eli

    Desktop

    Mobile


  •  7
    Alexander replied

    Hey,

    Apologize for the late reply.

    1. Mobile logo. Add this CSS:

    @media only screen and (max-width: 991px) { .nav__header { height: 80px; }
    .logo-container { padding-top: 10px; padding-bottom: 3px; padding-left: 36px; }
    }

    2. Desktop logo CSS:

    header .flex-parent { -webkit-box-align: flex-end; -ms-flex-align: flex-end; align-items: flex-end;
    }
    .nav__menu > li > a { line-height: 38px;
    }

    3. About logo size, you should upload 2 sizes for the logo. One for the regular screens and the other is for the retina screens, which is twice bigger. For example: 117x86 and 234x172.

    Please note, that this kind of questions are about theme customization, which is not included in our support policy.

    Cheers.

  • eyal1986 replied

    This was super helpful. 

    Thank you!