Frontend Mentor | Solution using Bootstrap 5 with Custom CSS coding challenge solution

Solution retrospective

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?

Community feedback

Kenyon Tu• 390

@kenyontu

Posted about 2 years ago

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

Janina Schwalb• 20

@schwalbj

Posted about 2 years ago

@kenyontu Thank you, Kenyon! The picture element is indeed new for me, I will have a look! :)

Ahmed Mahmoud Abdalwahab• 410

@Ahmed96Mah

Posted about 2 years ago

Hello Janina,

To center a container inside the middle of the screen you can use CSS's flex-box property. For example,

If you have a container div inside of the body tag:

body {
  display: flex;  // using flex-box
  flex-flow: column nowrap;  // defining main flex-direction (column) and not allowing item wrap
  align-items: center;  // For aligning items along the cross axis 
  justify-content: center;   // For aligning items along main axis
  min-height: 100vh;  //ensuring that the body's height is at least 100 view height
}

If you have multiple containers they will be all centered, and aligned vertically (as flex-direction is set to column). Similarly, To align items horizontally while being centered as well, you could use:

body {
  display: flex;  // using flex-box
  flex-flow: row nowrap;  // defining main flex-direction (row) and not allowing item wrap
  align-items: center;  // For aligning items along the cross axis 
  justify-content: center;   // For aligning items along main axis
  min-height: 100vh;  //ensuring that the body's height is at least 100 view height
}

So, if you have multiple containers they will be all centered, and aligned horizontally.

Note: setting the body's height property, doesn't contribute anything in centering the item, however, it allows enough space (if you are dealing with small containers) for you to see where the item is placed. So, you don't necessarily need it.

you can look up the property on MDN (which is an amazing reference) @ : MDN

It is best to always use flex-box for aligning items all over the page. While to provide the actual page's layout (such as deciding how tall the header, main & footer would be), you should use CSS's grid property. Read about it here @ MDN

Have a nice day, and keep up the good work :)

Marked as helpful

Janina Schwalb• 20

@schwalbj

Posted about 2 years ago

@Ahmed96Mah Thank you for this very helpful reply, Ahmed! :) I will definitely look into flex-box and grid and give it a try on the next project! :)

Ahmed Mahmoud Abdalwahab• 410

@Ahmed96Mah

Posted about 2 years ago

@schwalbj

You are welcome :)

Solution using Bootstrap 5 with Custom CSS

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community