Submitted over 2 years ago

Solution using Bootstrap 5 with Custom CSS

Janina Schwalb•20

@schwalbj

Preview site View code

This is a solution for...Product preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

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

@kenyontuPosted over 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

@schwalbjPosted over 2 years ago

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

Ahmed Mahmoud Abdalwahab•410
@Ahmed96MahPosted over 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
1
Janina Schwalb•20
@schwalbjPosted over 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! :)
0
Ahmed Mahmoud Abdalwahab•410
@Ahmed96MahPosted over 2 years ago
@schwalbj

You are welcome :)
0

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord