Hi there look for this CSS:
@media (min-width:420px) {
.wpsp-align .wp-show-posts-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.wpsp-align .wp-show-posts-inner>div {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center
}
}
And remove the @media (min-width:420px){ } from around the CSS.
Then add this CSS:
@media(max-width: 420px) {
.wpsp-align .wp-show-posts-inner .wp-show-posts-image {
max-width: 120px;
margin-right: 1em;
}
.wpsp-align .wp-show-posts-inner .wp-show-posts-entry-summary {
display: none;
}
}
Hi David, thanks for the response.
The css has helped with the alignment on mobile per as I wanted. A couple of more things I want (to make it similar to the one here: https://www.kitchenarena.in/)
1. The image seems to be zoomed in, I want the full image and occupying 1/3rd of the width of mobile while preserving the aspect ratio (I understand that the height can be different then for different posts – which is ok).
2. Date should appear below the title
3. The font of the title should be reduced
ideally, same as the one here: https://www.kitchenarena.in/
Thank you
Did some modifications to the css you sent.
@media(max-width: 420px) {
.wpsp-align .wp-show-posts-single {
margin-bottom: 0px !important;
}
.wpsp-align .wp-show-posts-inner .wp-show-posts-image {
max-width: 120px;
margin-right: 1em;
}
.wpsp-align .wp-show-posts-inner .wp-show-posts-entry-summary {
display: none;
}
.wpsp-align .wp-show-posts-inner .wp-show-posts-entry-title{
font-size: 16px;
}
}
Can you please check if this looks okay?
-
This reply was modified 5 years, 8 months ago by
singhal1992.
Looks good to me.
Edit your WPSP list – in there you can set the position of the meta to below title.
Thanks, that’s what I was going to ask you. The meta is already set to below title on the list. This css is overriding that:
.generate-columns-container article .entry-header, .wp-show-posts-entry-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
I think this is intended to keep the category above the title in the magazine grid. Is there a way to disable this for the lists other than the magazine grid ?
Oh yeah – long time ago i build Dispatch – i forget lol 🙂
Try adding this CSS to correct its position just for the Align list:
.wpsp-align .wp-show-posts-inner .wp-show-posts-entry-meta {
order: -10;
}
Worked like a charm. Thanks for all the help David 🙂
One last question, on the desktop view for align, is there a way to reduce the width and height of the image. And since there would be more horizontal space for the title and excerpt, they should align with the image in the reduced height.
Unfortunately not with how the it is set up. You would have to give all the images a max-height which would break responsiveness.
Marking resolved. Thanks again for the help 🙂
Eat self-made cakes and other recipes which require grilling and baking. Must read review of microwave ovens.
https://www.offersingh.com/best-microwave-ovens-india/
