Support » Theme: OceanWP » (Video) Responsive Header and Title width problem

  • Resolved luisserrano

    (@luisserrano)


    Hello. Im getting this problem when change resolution. The header and title width is not the same on tablet or mobile. This is a fresh and updated WordPress with no custom css, no plugins (Deleted custom css, deactivated plugins). Ocean WP and WordPress only.

    Why header and title dont match with main content when change resolution?

    ———————————————

    VIDEO:
    https://youtu.be/jB4mNhrMY-g

    URL
    [ redundant link removed ]

    ———————————————

    Some help to solve it would be great. Thanks.
    Best regards.

    • This topic was modified 9 months, 1 week ago by .
    • This topic was modified 9 months, 1 week ago by Jan Dembowski.

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

Viewing 9 replies - 1 through 9 (of 9 total)
  • Hello,

    Try adding the below code to the Appearance > Customize > Custom CSS section and check it works or not –

    @media screen and (max-width: 959px) and (min-width: 580px) {
    .container, body.content-full-screen .elementor-section-wrap>.elementor-section.elementor-section-boxed>.elementor-container {
        max-width: 100%;
    }
    .page-header .page-header-title, .page-header.background-image-page-header .page-header-title, header#site-header {
        padding-left: 20px;
        padding-right: 20px;
    }
    }

    Hello Amit, thanks for answer.

    This is what I get after add that code. Now all is OK after mobile breakpoint and desktop resolution, but something went wrong in tablet or middle resolutions: Content is touching browser limits now. ¿Some tweak maybe? Thanks again for your help, we almost got it! 😉

    https://youtu.be/Xt3WFyMy43o

    Regards.

    I checked your site but didn’t see the issue as you showed in the video. Have you cleared cache after adding the code?

    Hi Amit.

    Maybe you checked during my “tweaking time”, not sure, sorry. Yes, all cache deleted, tested on several devices and browser, all plugins deactivated and no custom css code but yours. Keep getting same problem.

    Maybe the padding code need the main content label? I can see padding code for headers and titles but no main content label for padding.

    .page-header .page-header-title, .page-header.background-image-page-header .page-header-title, header#site-header {
        padding-left: 20px;
        padding-right: 20px;
    }

    Regards.

    I have to say. I have coded the oceanwp title for pages and post in order to place it to the left with this code:

    .page-header-title {
      text-align: left;
    }

    Anyway I dont think this little code may bother.

    Glad to hear that it is fixed!

    To be clear, I “bypassed” the problem by using one breakpoint only, removing the jump between desktop and mobile. As far as I know, tablet resolution padding is missing or blocked by a code, bug or something in my OceanWP and Im not able to find a real fix. Anyway the result looks clean and clear.

    Thanks Amit.

    You’re welcome! Thank you for explaining it.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘(Video) Responsive Header and Title width problem’ is closed to new replies.