Thumbnail distortion

  • spearfeather

    (@spearfeather)


    6 years ago

    Hello all, first time poster — apologies for any unintended mistakes.

    I’m using the Book Rev Lite theme. On the main page, the thumbnails of book covers next to the review titles appear slightly stretched horizontally (stretched to fit). They therefore appear a little distorted, as shown here as an example: [ Redundant like redacted ] See what I mean. It spoils the look of the page.

    Is there any way to remedy this? Many thanks for your time.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • netzmaedchen

    (@netzmaedchen)

    Hi @spearfeather,
    the images are set to display with 100% width in a parent container of a fixed width (150 x 190 px). If the image is less wide, it will look weird because it’s stretched to 100%.
    So to change that, you will have to modify some css.

    As you are using the main theme, you should either think about installing a child theme like described here Child Theme or add the css to the “Additional CSS” section in customizer. (I’m not quite sure that is present in all setups). More info on adding custom CSS

    To find out WHAT you want to change, use the code inspector in firefox or chrome, right click on the book-cover and check out the css code. (Check code using inspector)

    I would change .article-container article .feat-img a img from width:100% to width:auto and remove the background-color from .article-container article .feat-img

    You will need to learn a bit about css and child themes but that is well worth your time because you will be able to change other things as well, as soon as you know how.

    Good luck and have fun
    Regards
    ANja

    Thread Starter spearfeather

    (@spearfeather)

    Hi @netzmaedchen, this has been a huge help. I’m very grateful indeed. Thank you.

    netzmaedchen

    (@netzmaedchen)

    @spearfeather you are very welcome!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Thumbnail distortion’ is closed to new replies.