(Video) Responsive Header and Title width problem

  • Resolved luisserrano

    (@luisserrano)


    5 years, 3 months ago

    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 5 years, 3 months ago by luisserrano.
    • This topic was modified 5 years, 3 months 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)
  • Amit Singh

    (@apprimit)

    5 years, 3 months ago

    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;
}
}
    Thread Starter luisserrano

    (@luisserrano)

    5 years, 3 months ago

    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.

    • This reply was modified 5 years, 3 months ago by Jan Dembowski.
    Amit Singh

    (@apprimit)

    5 years, 3 months ago

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

    Thread Starter luisserrano

    (@luisserrano)

    5 years, 3 months ago

    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.

    Thread Starter luisserrano

    (@luisserrano)

    5 years, 3 months ago

    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.

    Thread Starter luisserrano

    (@luisserrano)

    5 years, 3 months ago

    I think I solved using this:

    https://wordpress.org/support/topic/strange-margins-in-single-blog-posts/

    Thanks, regards.

    Amit Singh

    (@apprimit)

    5 years, 3 months ago

    Glad to hear that it is fixed!

    Thread Starter luisserrano

    (@luisserrano)

    5 years, 3 months ago

    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.

    Amit Singh

    (@apprimit)

    5 years, 3 months ago

    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.