[Support request] Floated images on mobile

Please login to receive premium support.

Support for the free plugin can be found here.

Tagged: images, mobile

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

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

Author

Posts
December 9, 2018 at 2:23 pm #6824

Robert
Participant

So, I’m using image alignment left and image location above the title. This works alright on desktop displays (I’d much rather have the excerpt stay positioned under the title). Anyways, To the task I’m currently trying to do: I’d like mobile displays to match what we see on the desktop. Image – Left and the Title and excerpt positioned to the right.

Do we scale the images smaller to achieve this?

December 9, 2018 at 7:31 pm #6830
Tom
Keymaster
Hi Robert,

Give this CSS a shot:
```
@media (max-width: 767px) {
    .wp-show-posts-image.wpsp-image-left {
        float: left;
        margin-right: 1.5em;
        margin-left: 1em;
    }
}
```
Let me know 🙂
December 9, 2018 at 7:44 pm #6831

Robert
Participant

That did the trick for tablets. Doesn’t look good on phone portrait orientation (landscape looks alright).

December 10, 2018 at 6:23 pm #6835
Tom
Keymaster
Give this CSS a shot instead:
```
@media (min-width: 600px) {
    .wp-show-posts-image.wpsp-image-left {
        float: left;
        margin-right: 1.5em;
        margin-left: 1em;
    }
}
```
So anything above 600px will float the image. You can adjust that value as needed.
Author

Posts

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

You must be logged in to reply to this topic.