Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Andrew Festa• 50

    @afesta12

    Submitted

    My solution feels quite a bit 'hacky', which is the best word I could come up with.

    I could not get things to line up correctly using flex, so I switched the layout between flex and grid during a media query, which I'm assuming is not a best practice solution.

    I did learn a bit about displaying different images, but is there a preferred method to doing this? Display none seemed to work, but I also read about people using a background image.

    Thank you, and any feedback is highly appreciated! =)

    Responsive Card Using Grid and Flex

    6

    Kenyon Tu• 390

    @kenyontu

    Posted

    One way to avoid switching between flex and grid, would be to use grid with a single column on smaller screen sizes

    To display different images, I would recommend reading about the picture element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

    Marked as helpful

    1
  • Janina Schwalb• 20

    @schwalbj

    Submitted

    I have used bootstrap to achieve responsive design. Can you point me into a direction what I have to look at in order to achieve the same without bootstrap?

    My main challenge was to somehow center the main content horizontally. I have achieved this by applying different top margin, depending on the breakpoints. Is there a best practice how to achieve this?

    Solution using Bootstrap 5 with Custom CSS

    2

    Kenyon Tu• 390

    @kenyontu

    Posted

    For responsive design you can use media queries. And to use alternative versions of an image for different screens, take a look at the <picture> element.

    One way to center vertically is to add a minimum height and use Flexbox on the parent element:

    <body>
  <div class="box" />
</body>

    body {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.box {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  border: 1px solid black;
}

    Marked as helpful

    1