[Resolved] Title misaligned in mobile view

Home Forums Support Title misaligned in mobile view

This topic contains 21 replies, has 3 voices, and was last updated by  Leo 3 days, 4 hours ago.

Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #750090

    Kritish

    Hi,

    I have tried a few CSS from other topics and am unable to fix the title being misaligned on mobile view. I just needed the logo/title to be on top with the menu underneath, I tried with both mobile header enabled and disabled.

    GeneratePress 2.2.1
    GP Premium 1.7.5
    #750195

    Leo Customer Support

    Hi there,

    Are you currently removing the site header using the Layout Elements?

    If so can you try using this CSS instead so the normal header shows on mobile

    @media (min-width: 769px) {
        .site-header {
            display: none;
        }
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    Let me know when this is done 🙂

    #750210

    Kritish

    Hi Leo,

    Yes I am using elements to remove the header and have moved the title into the navigation following instructions from the documentation page.

    The code you gave did nothing.

    #750244

    Leo Customer Support

    Can you first disable that element which is removing the header?

    Then the CSS should hide the normal header on desktop only and shows on mobile.

    The normal header is closer to what you have in mind.

    Let me know if this makes sense 🙂

    #750317

    Kritish

    Hi Leo,

    I have done as you have said and disabled the element(which looks like it was doing nothing anyways) and added your CSS but the title still doesn’t look good in mobile view.

    #750541

    David Customer Support

    Hi there,

    try this:

    @media (max-width: 400px) {
        .main-navigation .site-branding a {
            font-size: 16px;
        }
    }
    #752257

    Kritish

    Hi David,

    Thanks for your help, I am bad with CSS and using what you gave I made some adjustments to make the mobile view slightly better.

    #752373

    David Customer Support

    Glad to be of help 🙂

    #752437

    Kritish

    Hi David,

    I know I already marked this as resolved, but I wasn’t sure if I should open another topic since it will be continuing on from what I did here. My boss wasn’t too happy as to how the title came out in mobile view on the iPhone X and has asked if the title can be changed on just mobile view.

    I tried the following CSS and wasn’t sure why it changed the layout completely and made it non-responsive(I think?).

    @media (max-width: 400px) {
        .main-navigation .site-branding a  {
    	visibility:hidden;
        }
    }
    @media (max-width: 400px) {
        .main-navigation .site-branding a:after  {
    	visibility:visible;
    	content:"OLMC";
        }
    }
    #752678

    David Customer Support

    Hi there,

    have you considered creating a mobile logo? You can then use the mobile header which has its own logo option.

    #753171

    Kritish

    Hi David,

    I had tried mobile header, but doing so didn’t display the title/crest as it is viewed on desktop view, which is why I was trying to change the text of the title when viewing in mobile view to the shortened form of just OLMC.

    So my end goal was ‘Crest OLMC hamburger menu’ all in 1 line.

    #753290

    Leo Customer Support

    So where would the toggle be?

    On the right of the title text?

    #753309

    Kritish

    Hi Leo,

    That is correct if you mean the menu toggle.

    #753340

    Leo Customer Support

    With the logo I assume? Might be quite tight for space.

    Can you disable the mobile header again?

    #753347

    Kritish

    Yes that is correct, that is why I wanted to change the full title to just “OLMC” using the CSS from my previous post.

Viewing 15 posts - 1 through 15 (of 22 total)

You must be logged in to reply to this topic.