Solo Theme Image

Themes
1

New here, thanks for any help.
I am using the Solo Theme.

I have reduced an image to 200x200 on my About page. When I go to my published site the image is huge and blurry What's going on here?

How can I correct this?
Thanks very much for your help

2

How did you make changes?

3

because this CSS pushes it to 100% width

.gh-article-image img {
  width: 100%;
}
4

I made them in the editor in the theme

5

Thank you for your reply…does this mean that there is no fix for the issue?

6

Most Ghost themes assume that they’re receiving an image big enough for any spot they’d like to use it in. So when you uploaded a very small (low resolution) image, it looks bad in that spot.

Something like this (in the page’s code injection spot, or site-wide) will avoid the image growth:

<style>
.gh-article-image img {
    object-fit: contain;
    width: unset;
    margin-left: auto; /* these two center the image - remove if desired*/
    margin-right: auto;
}
/* align captions to center, because they look weird otherwise:*/
figcaption {
   text-align: center;
}

</style>
1 Like
7

Thank you so much Cathy!
I’ll give it a try