Frontend Mentor | Godstime's profile

Koya•310

@koyaboySubmitted over 1 year ago

Hey guys, so I just completed this challenge and I would like some feedback in the areas below:

I used pure CSS on this project and I would like to know whether Sass is really necessary to learn ?
I'm very comfortable with flexbox but I'm not quite confident using grid yet. I don't think I could have used it for this layout though but that's something I definitely want to get better at. Is there a way to distinguish when to use flexbox or grid ? What's the best scenario to use either ?
So I made a body class to serve as my body because I don't really like dealing with the conventional body tag, except to remove the default padding and margin. In order to center the content in the middle I had to give the body class of 100vh. Is that really necessary ? Must height always be defined to center a div both horizontally and vertically in a page ? See code snippet below:

.body {
    height: 100vh;
    background-color: hsl(212, 45%, 89%);
    display: flex;
    justify-content: center;
    align-items: center;
}

Any feedback will be appreciated. Thank you

QR Code Component using CSS Flexbox

2

Godstime•330

@iceberg61Posted over 1 year ago

First ** CONGRATS 🎊 ON** completing the challenge. For your first question.

It really depends on you. If you have interest in sass ,you should definitely go for it. Oh and for this project, sass is not necessary for it ** my opinion* *
CSS Grid is for layout; Flexbox is for alignment. CSS Grid and Flexbox are layout models that share similarities and can even be used together. The main difference is that you can use CSS Grid to create two-dimensional layouts. In contrast, you can only use Flexbox to create one-dimensional layouts. That means you can place components along the X- and Y-axis in CSS Grid and only one axis in Flexbox. With CSS Grid, you can align components into columns and rows. This feature makes it ideal for larger layouts that must be divided into sections. In other words, this type of layout will have elements that need to overlap and layer rather than being linear. Flexbox With Flexbox, you can lay out and align elements in a container even if you don’t know the size of those elements or if the size might change. That’s because a flex container is, well, flexible: it expands the flex elements to fill space when it’s available and shrinks them to prevent overflow when it’s not.
If I understand correctly, you are saying that the content is centered horizontally by default, but that the body needs a height: 100vh to center the content vertically.

body are block elements, which means that, by default:

They take up the entire width of the screen They only take up as much height as is needed to display their content (they have a default height of auto). If your div is a flexbox with the content centered, even if the content is centered vertically, the div will still only expand downwards as far as it needs in order to fit the tallest element inside of it. Since the div is still at the top of the screen, even if its content is centered vertically inside the div, the content will appear at the top of the screen because the div is only as tall as the content and because the div is at the top of the screen.

However, the height: auto default property of body can be overridden. If you set the height to 100vh, you force the div to be 100vh of the height of its parent element, the page. The div would then have a bunch of extra space for the content, and due to the flex rule, it would position the content in the vertical center of that extra space.

Marked as helpful

0

verilly•50

@verillyhSubmitted over 1 year ago

Is it best to use flexbox for mobile, and grid for desktop on main section, or use grid from the start?

news-homepage With CSS Grid

1

Godstime•330

@iceberg61Posted over 1 year ago

Well when i was creating this project. CSS grid was very difficult at first but i knew it was the best way to get this layout. so yes for desktop view, It best you use GRID and for mobile use FLEXBOX.

Also your workflow sure look nice👍😁 CONGRATULATIONS on completing the challenge.

1

Dikachi-Scorpio•30

@Dikachi-ScorpioSubmitted over 1 year ago

am new to coding so far I have only been able to learn html and css I made the web page mobile responsive but I do not think my method would work across all devices. I would appreciate it if my work is looked into by the senior developers. Thanks

Responsive 3-column preview card

3

Godstime•330

@iceberg61Posted over 1 year ago

On your css file. while this👇 works to a certain degree. section{ display: flex; flex-direction: column; align-items: center; }

but in order for section to be positioned at the center. this should work properly. i set height to section because it align-items center won't center😂 until it is giving a height section { display: flex; align-items: center; justify-content: center; height: 100vh; }

0