[Resolved] Resize logo, dropdown menu and font sizes on mobile

Home Forums Support [Resolved] Resize logo, dropdown menu and font sizes on mobile

Home Forums Support Resize logo, dropdown menu and font sizes on mobile

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #793131
    Erika

    Hi!
    Our site looks on desktop and table fine. I have following struggles with mobile:
    1) Under the hook on top for contact we have the logo. I would like to make it bigger on mobile, ideally 80% width.
    I have set the image in css
    .header-image {
    max-width: 60%;
    padding: 10px;
    }
    and it works fine on desktop and tablet, but I would like to have it on mobile 80%. What do I have to add to the css, so it resizes on desktop and table to 60% and only on mobile to 80%?
    2) I have set the font-sizes for h1, h2, h3 in the customizer for mobile, but no changes occur. Also no changes on general font size. Why? If it is a Google Font problem, how do I resolve it?
    3) The dropdown menu on mobile has very high buttons. I would like to have them not so high. I tried several adjustments, but it simply mixed up all buttons so the buttons looked good, but I could not click on them or they were cut off in active or hoover.
    Thanks, Erika

    #793207
    Leo
    Staff
    Customer Support

    Hi there,

    1) By default the logo should be 100% on mobile. I used browser inspect to remove this line of CSS you’ve added:
    max-width: 60%;
    And the logo got bigger.

    2) You have this CSS setting the font sizes:

    h1 {
    	font-size: 40px;
    	margin-bottom: 20px;
    	line-height: 1.2em;
    	font-weight: 300;
    	text-transform: none;
    }
    
    h2 {
    	font-size: 30px;
    	margin-bottom: 20px;
    	line-height: 1.2em;
    	font-weight: 300;
    	text-transform: none;
    }
    
    h3 {
    	font-size: 20px;
    	margin-bottom: 20px;
    	line-height: 1.2em;
    	font-weight: normal;
    	text-transform: none;
    }

    3) Not quite sure what you mean but perhaps menu item height with mobile toggle on is what you are looking for?
    https://docs.generatepress.com/article/menu-item-height-width/#height

    Please do check over your custom CSS when something doesn’t work for you as you have lots of custom CSS added.

    Let me know if this helps 🙂

    #794097
    Erika

    Hi Leo,
    1) Yes, but on desktop and tablet I would like to have the logo sized only 60% and on mobile 80%. I looked at the mobile.css and mobile.min.css but can´t find here any line regarding sizing the logo, so I do not know what to add to my custom css for the mobile, as said, desktop and table are fine with the lines are added. In the Customize there is no possibility to size to logo, so it is not 100% (or I just didn´t find it?). Probably it will be something like @media
    2) Solved, the problem was the @import line in my custom css that embedded the stlye.css and therefore the Customize was not working properly. I guess now I am set to go with the Customizer and finally I see what I am changing 😀
    3) Thank you, that was it. However, with the same restriction as in 2)
    Thanks Leo, Erika
    PS: THe Dokumention of GP is excellent. Good structure, clear text, good instructions. However in some cases I do not exactly know where to look…

    #794646
    Leo
    Staff
    Customer Support

    So on desktop, you can use the logo width slider in the customizer:
    https://docs.generatepress.com/article/adding-header-logo/

    For different width on tablet and mobile, you can try using the @media method:
    https://docs.generatepress.com/article/responsive-display/#responsive-breakpoints

    Let me know if this helps 🙂

    #794907
    Erika

    Hi Leo, it did. These topics are solved. Thank you.

    #794977
    Leo
    Staff
    Customer Support

    No problem 🙂

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