Archived topic
Align Post title left/right for mobile only
5 replies · Started by Luis on December 4, 2020
Viewing posts 1–6 of 6
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!
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!
This archived topic is closed to new replies.
