How to change typography and photo size for mobile

Hi @kingkrewl ,

Can you link us to the page in question and provide a mockup image of how you want things to be styled on mobile? So we have a reference for the CSS writeup.

Let us know. ??

Hey Elvin, hope all is well! Would it be alright to link you to a reference site? The site contains WP show posts and I’d like to style my site for mobile and tablet the exact same way that they have. The site is reptilejam.com. If possible, please make the linked site private. It’s a colleague of mine’s site and I’m not sure he’s comfortable with it being publicly disclosed. My site is belapets.com. If possible, private that site as well. Thanks!

• This reply was modified 2 years, 9 months ago by kingkrewl.

This forum has a field for private URLs. ??

Can you edit your reply and move the site link to this private field?

Or you can send it to our contact page – https://wpshowposts.com/contact/

Hm, it doesn’t look like it’s giving me the option to edit my reply anymore. It only lets me edit my latest response. Would it be possible to delete the comment on your end and I can copy and send it through the contacts page on mine? Regardless, I’ll send it anyway ??

• This reply was modified 2 years, 9 months ago by kingkrewl.
• This reply was modified 2 years, 9 months ago by kingkrewl.
• This reply was modified 2 years, 9 months ago by kingkrewl.

Hm, it doesn’t look like it’s giving me the option to edit my reply anymore. It only lets me edit my latest response. Would it be possible to delete the comment on your end and I can copy and send it through the contacts page on mine? Regardless, I’ll send it anyway ??

I’ve got no privilege to do that, unfortunately.

But yes, I’ve seen the reference site as well. We can continue the conversation through email to keep everything else private. ??

Sounds good to me! I look forward to hearing from you ??

Reply sent to email. Let us know here if you weren’t able to receive it.

Else, we can continue the conversation on the email thread if it has to be private. ??

Thanks! For some reason, I didn’t receive it. I checked spam but it wasn’t in there either. Maybe resending the message will help.

Perhaps we can continue here instead as the reply only contains CSS anyway.

Were you pertaining to the 4 column layout for WPSP on mobile?

If yes, you can use this CSS:

@media (max-width:768px){
.wp-show-posts-columns#wpsp-1662 {
margin-left: -1em !important;
}
.wp-show-posts-columns#wpsp-1662 article.wp-show-posts-single {
width: 25%;
}

.wp-show-posts-columns#wpsp-1662 article.wp-show-posts-single .wp-show-posts-inner {
padding: 0 0 1em 1em;
}
}

Just for tablet, but for phone I would like just 1 column. I’m not sure if you’re able to get a visual on how the formatting is for the reference site that I linked above as far as image size and typography goes but I’d like to achieve that exact same look to a T if possible.

Actually, no need to change typography, I’ve just figured out how to do that through the customizer. As for the image sizes for tablet and phone, I would still like those changed ??

Just for tablet, but for phone I would like just 1 column. I’m not sure if you’re able to get a visual on how the formatting is for the reference site that I linked above as far as image size and typography goes but I’d like to achieve that exact same look to a T if possible.

The tablet layout for the reference site is the same as what it has on desktop which is 4 columns.

And this is actually the same as what your site has. It’s a WP Show Post CSS default for column-ed layouts. (tablet and desktop share a setting, mobile in 1 column)

Were you seeing something different? Can you specify what exactly you want applied?

When I placed the code in, four columns popped up for mobile. I don’t have an issue with the columns I’m just wanting to change the size of the images for both mobile and tablet while in landscape and portrait mode just how it is on the reference site ?? I apologize if I wasn’t clear enough while trying to explain that in the previous message.