Support » Fixing WordPress » Post titles/text disappear on mobile version of site, can only see the thumbnail

  • ighsite

    (@ighsite)


    For some reason when I view my website on a mobile browser, the titles, excerpts, etc. on all my posts don’t appear, just the thumbnail images attached to them.

    Can anyone help me fix this please? Thanks!

    • This topic was modified 2 months, 4 weeks ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic

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

Viewing 15 replies - 1 through 15 (of 19 total)
  • Topher

    (@topher1kenobe)

    Your CSS has this:

    .elementor-posts .elementor-post {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    When I remove all three of them it looks great on mobile. I don’t know Elementor, so I don’t know how to do it with that, but you could write some CSS to set those displays to block and then it would work fine.

    corrinarusso

    (@corrinarusso)

    See attached.
    The text is there, but it’s not in the frame:
    https://postimg.cc/75TqgSnG

    Try a different theme first to see if it renders properly.

    Thread Starter ighsite

    (@ighsite)

    @topher1kenobe thanks for the quick reply. I’m very new to WordPress and building websites in general, so bear with me please!

    When you say “set those displays to block,” are you able to elaborate a little bit on what that means?

    Thread Starter ighsite

    (@ighsite)

    @corrinarusso good to know, thank you! If I swap a theme can I change back to my old one without everything getting reset? Just want to make sure I don’t mess up any formatting or lose anything.

    Topher

    (@topher1kenobe)

    If you’re doing your own CSS, make it like this:

    .elementor-posts .elementor-post {
        display: block;
    }
    corrinarusso

    (@corrinarusso)

    Lol, @topher1kenobe that’s kinda cheating!

    here @ighsite :
    Admin –> Customizer –> Additional CSS :

    .elementor-posts .elementor-post {
        display: block;
       
    } 

    https://postimg.cc/rK484SJd

    corrinarusso

    (@corrinarusso)

    @ighsite

    If I swap a theme can I change back to my old one without everything getting reset?

    Yes.

    Topher

    (@topher1kenobe)

    It absolutely is, cheating is always the fastest way to get something done. πŸ™‚

    corrinarusso

    (@corrinarusso)

    Hahaha.
    Reminds me of the loooong days in the corporate world …. “Do you want it good, fast or cheap? Pick two”.
    πŸ™‚

    Thread Starter ighsite

    (@ighsite)

    @topher1kenobe @corrinarusso thanks, that did the trick, I see the text appearing on mobile now!

    Sorry to be a pain, but one last question: doing that changed the formatting of my posts so that the title/excerpt is now underneath the thumbnail rather than to the right of it. Do you know if there’s a way to get it to go back to the old formatting (image on the left, title and excerpt on the right) for the desktop version while keeping the text under the image for the mobile version?

    Topher

    (@topher1kenobe)

    Yes, you want to wrap your new code in a media query. It’ll look something like this:

    /* When the browser is at least 600px and above */
    @media screen and (min-width: 600px) {
        .elementor-posts .elementor-post {
            display: block;
        } 
    }

    I’m not awesome with media queries, you might want max-width instead of min-width, and you’ll want to experiment with the actual width.

    I got this info from https://css-tricks.com/a-complete-guide-to-css-media-queries/

    corrinarusso

    (@corrinarusso)

    @media only screen and (max-device-width: 480px) {
     .elementor-posts .elementor-post {
        display: block;
     }
    }
    Topher

    (@topher1kenobe)

    And you’re never a pain for learning. πŸ™‚

    corrinarusso

    (@corrinarusso)

    Hey @topher1kenobe

    @media screen and (min-width: 600px) {

    The CSS should generate for mobile only – I think you meant to say max-width here, not min-width.

    Topher

    (@topher1kenobe)

    Yeah, I mentioned that above. I always have to fiddle with it, I’m not awesome at CSS anymore.

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