mobile view looks very weird

  • Resolved hellblauervogel

    (@hellblauervogel)


    5 months ago

    Dear All,

    I am more or less happy with my Website. There are still some things too change, improve but it is getting better and better.

    But now when I saw the mobile view of my site (opened it on my Android) I was slightly shocked.

    Why does it look so weird?

    How can I correct it?

    Most critical issues:

    The navigation (when I open the hamburger Icon) is on the very very right. That looks very strange..

    Just to see some little edges of the cover pic looks strange too.

    When I go to the page “Leistungen” the blocks are not in a good vertical row.

    On the page “barrierefreie pdfs” the Block “Anwendungsbeispiele” here is also nothing in a vertical row.

    Also strange: When I am on the starting page of the site, the header navigation (as mentionned above) looks weird.

    When I go to some other subpage and open the header navigation from there,it looks normal!

    Looking forward to hearing from you and thank you in advance!

    BR Angelika

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Jahid

    (@jahidhasan018)

    Hi @hellblauervogel ,

    There may be some issues with the layout settings. It’s hard to pinpoint the exact problem without seeing the backend (please do not share any login or personal information here). However, I’ve written some CSS code that should fix the issue:

    .wp-container-core-group-is-layout-2.wp-container-core-group-is-layout-2 {
    justify-content: space-between;
    padding: 20px;
}

.wp-block-navigation__responsive-container {
    padding: 20px !important;
}

.wp-block-navigation__responsive-container ul {
    margin: 0;
    padding: 0;
}

    You can add this CSS code using the WPCode plugin or any other method you prefer.
    Let me know if this helps.

    Best regards,
    Jahid

    Thread Starter hellblauervogel

    (@hellblauervogel)

    Dear Jahid,

    thank you very much for being so helpful.

    I have added your additional CSS -> https://ibb.co/DztWHS0

    But the problems stay the same. I do not see any change. Still same situation as above.

    Do you or someone else have an idea what else I can try or how I can correct that?

    Thank you so much in advance!

    BR Angelika

    Jahid

    (@jahidhasan018)

    Hi, @hellblauervogel I’m sorry to hear that the issue persists. It seems like I need to add !important to some CSS properties to prevent them from being overridden by the default CSS. Here is the updated code:

    .wp-container-core-group-is-layout-2.wp-container-core-group-is-layout-2 {
    justify-content: space-between !important;
    padding: 20px;
}

.wp-block-navigation__responsive-container {
    padding: 20px !important;
}

.wp-block-navigation__responsive-container ul {
    margin: 0;
    padding: 0;
}


    Note: Please clear your browser cache or reload the page by pressing Ctrl + Shift + R on your keyboard.

    Thread Starter hellblauervogel

    (@hellblauervogel)

    Thank you! That works now and looks great! ??

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