Change featured image alignment on mobile

  • Resolved montparnos

    (@montparnos)


    4 years, 11 months ago

    Hello

    I would need to change the alignment of featured images on mobile screens.
    By Default the images are zoomed in center but my featured images have relevant contents on right side and I would like to show that part on mobile view.
    I’ve tried a lot through my basic CSS knowledge but nothing to do…
    Any Idea?

    Thank you so much!

    Federico

    • This topic was modified 4 years, 11 months ago by montparnos.

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

Viewing 2 replies - 1 through 2 (of 2 total)

  • It is difficult because the images are so much wider than they are taller. With the ratio in a mobile browser, the area is taller than it is wide. You can try some CSS like this

    @media screen and (max-width: 675px) {
    .site-header.featured-image .site-featured-image .post-thumbnail img {
        object-fit: contain;
    }
}

    However you’ll see that there ends up being a border at the top/bottom of the image

    Thread Starter montparnos

    (@montparnos)

    Thanks a lot Jarret!
    I solved using your code and adding object-position: 90% that’s exactly what I wanted

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Change featured image alignment on mobile’ is closed to new replies.