CSS not working when screen width is smaller than 1024px

  • twanvanvugt

    (@twanvanvugt)


    3 years ago

    I am building a website and one of the pages has two main titles, and I want to hide the default title. I added this line of css to hide it:

    .post-2048 .title-post {
    display:none;
    }

    It works for big screens, but whenever I switch to a screen which is 1024px or smaller, the default title all of a sudden reappears. What is causing this title to become visible again in this smaller screens and how can I solve it?

    By the way, I have this problem for other CSS lines too. However, the majority of CSS lines work perfectly fine on both desktop and mobile view.

    Thanks a lot in advance!
    Twan

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

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

  • Hi @twanvanvugt,

    Thank you for contacting us.

    As checked, your CSS code is inside media query @media only screen and ( min-width: 1025px ). It should go to a separate line and not wrapped with media query.

    .post-2048 .title-post {
  display:none;
}

    Hope this reply helps.

    Regards,
    Kharis

    Thread Starter twanvanvugt

    (@twanvanvugt)

    Hi @kharisblank

    Thank you for your reply and pointing out that I forgot to put a bracket in my CSS code.
    Unfortunately, this did not solve the problem.

    The weird thing is that the CSS (display:none) works while editing in WordPress under “Customize” -> “Additional CSS”. But when I load the website in a browser where I am NOT logged in to WordPress, the CSS code does not work and the title appears twice on the page. But it appears ONLY twice when the screen width is 1024px or less.

    Hi @twanvanvugt,

    Thank you for getting back.

    I checked your site further and saw it has a cache-enabled.

    Perhaps the recent changes won’t take effect on the front-end until the cache is flushed.

    Please try:

    • Clearing cache
    • Clearing web brower’s history/cache
    • Restarting web browser

    Hope that helps.

    Regards,
    Kharis

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘CSS not working when screen width is smaller than 1024px’ is closed to new replies.