[Support request] Mobile thumbnail to look like desktop thumbnail

[Andrei Cosmovici]

Hello!

Is it possible to make the thumbnail image in the mobile version of the blog to look like the thumbnail from the desktop version of the blog? I attached a photo from the mobile and the desktop version, to see what I’m talking about.

Thanks!
Andrei

[Leo]

Hi there,

Try this CSS:

@media (max-width: 768px) {
    .alignleft {
        float: left;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Andrei Cosmovici]

Does your theme support Thumbnail (and NOT Featured) image? I tried to edit the Post in order to choose an image as Thumbnail, and I didn’t find the place to do this.

[Leo]

Sorry not sure if I understand.

Is this related to the original topic?

If not any chance you can open a new topic?

Thanks 🙂

[Andrei Cosmovici]

Somehow yes. In the original topic, I asked if possible to make the thumbnail photos look like in the image below:
https://lh3.googleusercontent.com/z9_gNzdlE8dSuNwodUe8k8GVSNGqXfpYD1jYUB7jK2-d21ytrGDJXryU271VdT5pL8S7h8ZzzAg4VVg0KKt2CBnKUwVh3pGtSdSUTKGgFBQHULttuBfwMzx0r1LvDWmLbz1XNayKfc583ncC43alanhcg5qz0P09IAJuAtSTaIDikiuE55xQ4n2JezNQEC3uYs0vBbaCQQfADBAI89dCfDmFPi3HRsWmRYqygCiOImS4stF0fXbKsaNQTruzff9SKo3DWGJ9erKNV5o-GIXBbFpDeqSKPa6qJgGTF4tVjHBv9pqJwyHCIlOzSJtSlskx5uEZvmazdYtyqBf-0FqXpu2KqZ9jPA6WA4kKnL7TModxdoYEPEDgO83MsCk4cAXTflrBYkDteAZNI-LDWN6AtkfWYpjb0-vpxpxh-BbDj02azN0_0Sg1FwlWtA-gMXKQC1Wm3zFlGwwhvoaJQy1Gy8_GTKqIFsfPxzRakWw65qV0b15ClnTXZ1PHyhnj7bz556IYOe4l6Y26sZpiaiDkas1bhn3IZKpQ-WVycxnEXtu3lNFL0KTuEIF8rj4rHzlIZl90ZCbK74CIOfCSQrc6lLjOm8WyDcbPftlnTiMD7G_RhZ8b86qd-YGWIpKkaMzbLtDcFwkcIaIfaSFBMtVCXNTi6540iUOj7_kCmZq15xqSiRrjf8B1gw=w1280-h711-no

You told me ”yes”, but after adding a piece of CSS code.

Which I did. But then, I didn’t found where to choose the tumbnail photo, for a certain post. This is why I asked you if your theme doesn’t support thumbnails photos. Or, if it supports, where from should I pick thumbnails photos, in the Theme Editor (Customizer)?

Andrei

[Tom]

Hi there,

The theme does support featured images. You need to set them inside the editor as you write/edit your post. They’re called “Featured Images”.

Right now I’m not seeing any featured images on your site, and your images above aren’t loading.

Did the CSS Leo provided not do anything?

Let us know 🙂

[Andrei Cosmovici]

It seems Leo’s CSS didn’t had any effect.

Let me tell you once again what I would like to happen:
– when setting a featured image inside any post, I’d like this image to show up inside the article (this happens), but also “outside” the article, I mean when browsing through multiple articles. You have an example of article where the featured image show up also when browsing the articles, please look at the attached photo. I don’t know by which miracle this happens.

In order to check all this, I set a featured image for the last recent article, named “Cu bebe in masina – 5 sfaturi vitale”. The featured image can be seen inside the article, but not when browsing the article “from outside”.

In order for you to react quicker and better, please find re-attached the infos for accessing the blog dashboard:

[Tom]

That image is displaying because it’s inside your content, and that particular post seems to be using the “More Tag”: https://docs.generatepress.com/article/using-the-more-tag/

Using that tag will allow HTML in the excerpt, which in turn will display images.

If you remove that tag, you’ll then be able to upload Featured Images, which will be shown inside and outside of the single post.

I’m not seeing a featured image inside that post you mentioned – is it still added?

[Andrei Cosmovici]

YOU: If you remove that tag, you’ll then be able to upload Featured Images, which will be shown inside and outside of the single post.

ME: I went back to the last post of my blog: https://blog.teri.ro/cum-poti-salva-viata-copilului-tau-cinci-sfaturi-pentru-calatoriile-cu-masina/
There, I can see the featured photo inside the article, but not outside it, neither on desktop, nor on mobile pages…

[Tom]

If you go to “Customize > Layout > Blog”, what do you have set here?: https://www.screencast.com/t/55bcnGnv

[Andrei Cosmovici]

Evrika!

BUT 1:
Left / Center / Right won’t work. The image stays in center, whether I choose left or right alignement.

BUT 2:
Is it possible to have the image inline whith the text? In the mobile version of the pages. Like in the image bellow. Are there some settings for that? In the post outside AND inside.

https://blog.teri.ro/wp-content/uploads/2019/12/Screenshot_20200226_091246_com.android.chrome.jpg

[David]

Hi there,

For #1 – Tom’s Image:

You have separate options for Archive, Post and Page.

For #2 – try adding this CSS:

.generate-columns-container .entry-content img {
    max-width: 100px;
}

[Andrei Cosmovici]

You: You have separate options for Archive, Post and Page.
Me: I got this, I choose Featured Image to be displayed in both Archives and Posts.
So Featured Photo shows, but:
– only in the center, but choosing left/right simply won’t work.

You: try adding this CSS:
.generate-columns-container .entry-content img {
max-width: 100px;
}
Me: I put this CSS code in the space below the Post, AND in your Simple CSS app. Images still won’t look like in the image below, but only in the image below, insite the post – desktop version, it will look like I asked for:
https://blog.teri.ro/wp-content/uploads/2020/02/Screenshot_5.jpg

In the post – mobile version, and in the Archive (both mobile and desktop version), the image will look like below:
Archive – Desktop view: https://blog.teri.ro/wp-content/uploads/2020/02/Archive-Desktop-view.jpg
Archive – Mobile view: https://blog.teri.ro/wp-content/uploads/2020/02/Archive-Mobile-view.jpg
Inside Post – Mobile view: https://blog.teri.ro/wp-content/uploads/2020/02/Inside-Post-mobile-view.jpg

[Tom]

Hi there,

Try this CSS:

.generate-columns-activated.post-image-aligned-left .generate-columns-container article:not(.featured-column) .post-image {
    float: left;
    margin-right: 1.5em;
}

[Andrei Cosmovici]

I used your CSS, and now:
– it works inside the post, desktop version
– it works outside the post (archive), desktop version
– it works outside the post (archive), mobile version
– it doesn t work inside the post, mobile version. I mean, image will be placed between title and text, and not at the left of the text, like in the image below:
https://blog.teri.ro/wp-content/uploads/2019/12/Screenshot_20200226_091246_com.android.chrome-485×1024.jpg

Related to this problem (I think), when opening an article on mobile, the text won t fill the whole screen, like in the image below:
https://blog.teri.ro/wp-content/uploads/2020/03/Screenshot_20200305_082342_com.microsoft.emmx_.jpg
Is there a CSS to fix this?

[Author]

Posts