Mobile dispaly – WP Show Posts

Tagged: mobile

This topic has 5 replies, 2 voices, and was last updated 3 years, 11 months ago by Tom.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
April 26, 2019 at 5:45 am #9006

Hans
Participant

Hi there,

I use WP Show Post Pro (1.0-beta.1) to display my projects. I selected the Cards Overlay Style 2 option. On my PC everything is showing as set up, but the mobile display is different.

On PC only the featured image is displayed. Title, meta information, Read More-button, only showing on hoover. And that’s just like i want it. But… on mobile title, meta, read more are displayed on default. How can i change/edit this for mobile. I only want to show the read more button on mobile.

Thanks and regards
Hans

(WP 5.1.1 / GP Premium 1.8.0-rc.2)
GeneratePress 2.2.2

April 27, 2019 at 3:53 pm #9025

Tom
Keymaster

Hi there,

Any chance you can link me to your site?

This is likely because there is no hover on mobile.

We can adjust it with CSS.

Let me know 🙂

September 19, 2019 at 9:11 am #11194

Hans
Participant

Hi Tom,

It’s been a while since i got in touch. Sorry for that. I understand your remark. But the problem is that on mobile you can’t read the text. So is it possible to create – only on mobile – a coloured background for the the title and meta information? Is this possible to realize?

http://dev.grifontwerp.nl/werk/

September 20, 2019 at 8:16 pm #11224
Tom
Keymaster
No worries! Try this CSS to show the read more button only:
```
@media (max-width: 768px) {
    .wpsp-overlay .wp-show-posts-entry-header {
        display: none;
    }
}
```
Otherwise, try this:
```
@media (max-width: 768px) {
    .wpsp-overlay .wp-show-posts-entry-header {
        background: red;
        color: white;
    }
}
```
October 9, 2019 at 9:15 am #11412

Hans
Participant

Hi Tom,

Once again my apologies for my late response. I’m a bit busy, so I don’t have much time to work on my personal website. Anyway, I came to the conclusion that the Cards Overlay Style 2 option is not the best option on mobile. I opted for a different approach: the Base option. Also looks good on mobile. But… is there a way to make the image square. What I mean by square is to leave the current width as it is and to make the image higher so that it is square. (??) Playing with the image width settings at the card options makes the image less wide. And that is not wath i want.

Thanks again.

October 11, 2019 at 8:32 pm #11438

Tom
Keymaster

Hi there,

You would need to explicitly set the width and height in the settings for it to be square. I don’t believe it’s possible to force a perfectly square image using only CSS (without losing image quality).
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

[Support request] Mobile dispaly