- This topic has 5 replies, 2 voices, and was last updated 5 years, 4 months ago by
.
Viewing 6 posts - 1 through 6 (of 6 total)
-
Posts
-
Hi,
I had a good look around and play with this but it’s a bit beyond my understanding (floats etc).
Under ‘Latest research’ I would like to force the post titles to the left, so that it’s one post per row essentially.
This is my code atm
@media (max-width: 767px) { .wp-show-posts-columns .wp-show-posts-single { display: block; width: 50%; } #wpsp-1987 .wp-show-posts-columns { margin-left: -20px !important; } #wpsp-1987 .wp-show-posts-inner { margin-left: 20px !important; margin-bottom: 40px !important; } #wpsp-2048 .wp-show-posts-columns { margin-left: -20px !important; } #wpsp-2048 .wp-show-posts-inner { margin-left: 20px !important; } }//I’m a happy tipper 🙂
Thanks guys!
Customer Support
Hi there,
just to confirm, do you want a single columns on Mobile?
And should it be the Image (left) and Title (right) ?Hi David,
Yes posts for ‘latest research’ to be single column only for mobile.
Image to the right and post title left.
(I can play around with the margins after to get it sitting right if need be)
Thanks in advance!
🙂
Try this CSS:
@media (max-width: 768px) { .wp-show-posts-columns#wpsp-1987 { flex-direction: column; } .wp-show-posts-columns#wpsp-1987 .wp-show-posts-single { width: 100%; } .wp-show-posts-columns#wpsp-1987 .wp-show-posts-inner { display: flex; flex-direction: row-reverse; } /* Set Image width */ .wp-show-posts-columns#wpsp-1987 .wp-show-posts-image.wpsp-image-center { flex: 0 0 33%; margin-left: 20px; } }Thanks David!
Worked like a charm.
🙂
Glad to hear that!
Viewing 6 posts - 1 through 6 (of 6 total)
- You must be logged in to reply to this topic.
