Viewing 6 posts - 31 through 36 (of 36 total)
1 2
  • Author
    Posts
  • June 26, 2015 at 8:35 am #464788
    Guenni007

    yes its everything ok but your menu is a “little” wider than that on my example page

    you have to change the media query option :

    @media only screen and (max-width: 1150px)  {
#top #header_main > .container,#top #header_mai     
etc pp

    to the max-width 1650px (this depends on how wide is your navigation and how big is your slogan – so play with it)

    and don’t forget to make that one setting more specific to the header else the whole site content is at 100%

    https://kriesi.at/support/topic/make-mobile-version-more-user-friendly/#post-464661

    webers-testseite.de/enf01

    after that you can style the menu which moves beneath the logo

    • This reply was modified 9 years, 5 months ago by Guenni007.
    June 26, 2015 at 9:10 am #464800
    Guenni007

    i found a very similar font at google :

    https://www.google.com/fonts/specimen/Architects+Daughter

    have a look even on my test page

    June 26, 2015 at 2:30 pm #464985
    Susanne

    Guenni007,
    another surprising change after inserting max-width 1650px!
    The header even in the PC version now shows logo, tagline and menu underneath each other … but unfortunately that’s not what the client wants. She only wants this for the mobile version.

    Also, how do I make this setting specific (100%) just for the header, not for the whole content?

    After all your efforts, I feel I shouldn’t challenge you any more. I’m not a programmer so I cannot be “inventive” or play around with code like you. But I’m very grateful for your patient support!

    June 26, 2015 at 4:39 pm #465051
    Guenni007

    and what do you want to make with your long navigation and a big logo with long slogan ?
    underneath the 1650px they will overlap

    do you realy read all the instructions or is it my bad english that sometimes some instructions are lost ?

    this code here:

    .responsive #top #wrap_all #header_main .container {
float:none;
max-width:100%;
padding-left:0;
padding-right:0;
width:100%;
margin:0 auto
}

    has to be inserted instead of :

    .responsive #top #wrap_all .container {
float:none;
max-width:100%;
padding-left:0;
padding-right:0;
width:100%;
margin:0 auto
}

    you see the difference : now only the container after #header_main is selected

    • This reply was modified 9 years, 5 months ago by Guenni007.
    June 26, 2015 at 5:05 pm #465070
    Susanne

    That did the trick, Guenni, the main container is now styled again.
    You’re right about the too large header – I’ll have to discuss it with the client what she thinks about this solution – which is great for the mobile, too!

    Thank you so much!
    Susanne

    June 28, 2015 at 8:51 am #465474
    Rikard

    Hi!

    Great, please let us know if you should need any further help :)

    Best regards,
    Rikard

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