Extend Mobile Image on all pages

Activello
1

Hi colorlib,

How do I expand the image and the post title in the ‘discover similar posts’ section at the bottom of every page on mobile only? Currently, it covers only half the mobile page.

How do i expand the image of the instagram posts which pull through to the homepage on mobile?

Website: https://shesoutside.com/

Thank you,

2

hey there

Hope you are having a good day and thank you for your question :slight_smile:

  1. Can’t see any discover similar posts on the page, please give me a reference
  2. Please add this CSS in appearance - customize - additional CSS

@media (max-width: 768px) {
#null-instagram-feed-3 img {
width: 100%;
height: auto;
}
}

Thanks!
Colorlib Support Team

3

It’s actually called ‘Recent Reviews’ and sits underneath the older post button.

thanks,

4

Hi

Ok, you can use this code in this case:

@media (max-width: 768px) {
.cat-post-widget li.cat-post-item {
max-width: 100%;
text-align: center;
}
#category-posts-8-internal .cat-post-thumbnail .cat-post-crop img {
height: 100%;
}

#category-posts-8-internal .cat-post-thumbnail .cat-post-crop img {
width: 300px;
}
}

5

Hi Noda,

Thanks for sharing. This does expand the picture and the text but it leaves extra padding on the lefthandside which means it isn’t central.

This also doesn’t work on the tablet version. Images attached.

Is there another solution?

Thanks for your help.

6

Hi there

Just increase media brakpoint value in the code:

@media (max-width: 768px) {

to something like this:

@media (max-width: 968px) {

or any other value you want :wink:

7

Hi Noda,

Thanks for your reply. This doesn’t seem to resolve either of the issues. There is still extra padding on the left hand side on the mobile and the tablet version doesn’t increase past this point even when i increase to 3000px.
Thanks,

8

Hi

You have to make changes in the code as well, this is final version:

@media (max-width: 968px) {
.cat-post-widget li.cat-post-item {
max-width: 100%;
text-align: center;
}
#category-posts-8-internal .cat-post-thumbnail .cat-post-crop img {
height: 100%;
}

#category-posts-8-internal .cat-post-thumbnail .cat-post-crop img {
width: 600px;
}
}