[Support request] Left Alight Thumbnail in Mobile View

[Sourish]

hello,

I would like to align the thumbnail on homepage of my website on the left while in mobile view. It automatically centres. I am using the GP theme .

Also is it possible to reduce the size of thumbnail by a certain % when in mobile view , so it works well on smaller screens when aligned left.

thank you .

GeneratePress 2.1.4

GP Premium 1.7.2

[David]

Hi there,

can you provide a link to the site? you can edit the original Topic and use the Site URL field for privacy.

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

[Sourish]

Hello ,

I have added the site url which i am using for this testing purpose.

Sourish

[David]

So try this CSS:

@media (max-width: 768px) {
    body:not(.post-image-aligned-center) .inside-article .post-image {
        float: left;
        margin-right: 1.5em;
        width: 100px;
    }
     .entry-summary {
         font-size: 0.9em;
     }    
}

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

[Sourish]

that worked perfectly. is there a way to reduce the size of the image.

Sourish

[David]

The code above reduces it to 100px on devices upto 768px
If you wanted to reduce it further on mobile, you could add this code as well:

@media (max-width: 360px) {
    body:not(.post-image-aligned-center) .inside-article .post-image {
        margin-right: 1em; /* adjust for spacing */
        width: 80px; /* adjust for image size */
    }
}

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

[Author]

Posts