Mobile Browser – Logo is not correctly aligned on each page as on Browser

  • Resolved martinhoang

    (@martinhoang)


    3 years, 6 months ago

    Good morning,
    I have issues with my Site Logo in Mobile browsers. When I open my website, logo is not correctly aligned as in Desktop browser.

    Mobile Web Browser:
    On Homepage: Logo is overlapping with the title. Logo should be above the title.

    Articles page: Logo should be above the title.

    About page: Logo is overlapping with the title (About)

    Also when I open the article, logo is not located above the title of the article.

    I would apprecciate any tips.
    How to solve this?

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)

  • Hi @martinhoang,

    You can try fix these with a few lines in CSS. Please, go to Appearance-> Customize
    And in the last option, “CSS” add the following lines:

    @media (max-width: 544px){
    .site-branding img, .site-header .site-logo-img .custom-logo-link img {
    max-width: 25%;
    }
    }
    .ast-advanced-headers-layout {
    padding-top: 0px;
    }`

    Apply and publish and let me now.

    Thanks.

    Thread Starter martinhoang

    (@martinhoang)

    Hi @elartedelaweb,
    thanks for your response.
    I just published it.

    It looks better now. No overlaps.
    However, I see on Articles Page. The logo is big while on other pages it is small.

    Hi @martinhoang,

    Good news!
    I can see the Articles Page. This is a Category page and the CSS rule not apply in this case. Please, you can add the !important property to apply on this page. Change the following line on CSS:
    max-width: 25%;
    To:
    max-width: 25% !important;

    Thanks.

    Thread Starter martinhoang

    (@martinhoang)

    @elartedelaweb
    done.
    Now on Articles the logo is smaller than on other pages.
    But looks better.

    Thread Starter martinhoang

    (@martinhoang)

    Also when I open on Mobile Web the only article I have:
    https://martinhoang.cz/7-expert-negotiation-principles/

    here the logo is small as on Articles Page, which is fine!

    Could we do somehow that the size of the logo is the same size on all pages (including Articles Page)?

    You can try with this CSS line:

    .ast-header-break-point .ast-site-identity {
    width: 55%;
}

    Thanks.

    Thread Starter martinhoang

    (@martinhoang)

    Applied and published.

    I think it looks good now!

    Thank you!

    You′re welcome!

    Please, if the problem is fixed, could you close the thread? This help to other users and the use of forum.

    Thanks and regards

    Thread Starter martinhoang

    (@martinhoang)

    Okay will do.
    thanks!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Mobile Browser – Logo is not correctly aligned on each page as on Browser’ is closed to new replies.