Images not responsive

  • slimonl

    (@slimonl)


    5 years ago

    I’m trying to make the 3 images on the right responsive – I want them to get smaller when the screen gets smaller. Currently this is not happening – when I make the screen size smaller, the images do not reduce in size and one of them drops down below the others.

    Is the only way to do this to make a smaller version of each image, then add the srcset attribute to the image code? If so, I’m not entirely sure what that would look like.

    Or any other simpler fixes? thank you! -Licia

    • This topic was modified 5 years ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic

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

Viewing 1 replies (of 1 total)
  • Joy

    (@joyously)

    No, you don’t need to make a smaller version.
    The CSS used is causing the issue.

    .wrapper2 {
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: 185px 185px 185px;
    justify-content: space-between;
}

    First, grid stuff doesn’t affect flex (well, sort of), so those sizes are not doing anything.
    Second, it is told to wrap, so it does.
    I didn’t see any CSS for the flex items, which is the first level items within the flex container (wrapper2). That is where you indicate how each item should grow or shrink.
    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items

Viewing 1 replies (of 1 total)
  • The topic ‘Images not responsive’ is closed to new replies.