Archived topic
Left Alight Thumbnail in Mobile View
5 replies · Started by Sourish on September 14, 2018
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 .
Hi there,
can you provide a link to the site? you can edit the original Topic and use the Site URL field for privacy.
Hello ,
I have added the site url which i am using for this testing purpose.
Sourish
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;
}
}that worked perfectly. is there a way to reduce the size of the image.
Sourish
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 */
}
}