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.
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.
@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?
@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.
If you’re doing your own CSS, make it like this:
.elementor-posts .elementor-post {
display: block;
}
Lol, @topher1kenobe that’s kinda cheating!
here @ighsite :
Admin –> Customizer –> Additional CSS :
.elementor-posts .elementor-post {
display: block;
}
https://postimg.cc/rK484SJd
It absolutely is, cheating is always the fastest way to get something done. 🙂
Hahaha.
Reminds me of the loooong days in the corporate world …. “Do you want it good, fast or cheap? Pick two”.
🙂
@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?
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/
@media only screen and (max-device-width: 480px) {
.elementor-posts .elementor-post {
display: block;
}
}
And you’re never a pain for learning. 🙂
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.
Yeah, I mentioned that above. I always have to fiddle with it, I’m not awesome at CSS anymore.
. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic
