@KayloPortal
Posted
🎊Hello, Nice job!
🎄 I saw your project and your code, good job, and nice problem solving!
🔮 I have some suggestions for your code that can level up your code.
- Responsive Layout Sizing
- As you said, the layout has a problem, when we get into 800px width, the points lose their positions. This problem happens because of the sizing method that used to sizing the .countainer and .countainer2
.container{ margin: auto; width: 100%; padding: 80px 30px; }
-
The container width is set to 100%. it means that the box is looking at it's parent to set its size. the parent here is the <body> tag. 100% of width for body tag children, equals to the maximum width of the device screen size. (for example if the screen width is 800px, the 100% width for <body> children like [.container] equals to 800px)
-
Also, we leaved a padding for the .container, Right? The padding value is 80 & 30. it means that the width of the container2 is equal to (100% of the width - 30px - 30px). Can you see the problem here? let me ask a question,
-
What's the value of the .container2 width, in a mobile with screen width of 350px?
-
it equals to 350 - 30 - 30 = 290px.
-
What about a tablet with 1024px screen width?
-
1024 - 60 = 960px
-
The width is not a fixed value, it's changing on different screen widths. So, What problems can it make?
-
using vw and screen widths for sizing our boxes have a big problem, we have devices with screen size of 200px to 4650px and higher, so if we set our elements sizes by these sizes, it will change and change and change on lower or higher screen sizes, and many times this changing value is so bigger that we wanted. For example it's very small on a mobile as we can't read them, and it's very big on a TV or a 4K monitor.
So, what's the key?
-
CSS have "rem" & "em" units for creating responsive layouts. instead of using vw for sizing our boxes or making them with base of screen width with using 100% value in <body> tag, we can use rem.
-
rem is a relative unit, and the base and value of it can be changed with CSS or devices. you can read about rem units here and here and here
And, also, for using h1-h6 tags
- NEVER USE <h1-h6> TAGS BY THEIR SIZE
- The reason of we have 6 tags for titles, is not the size. it can change by CSS.
- The reason is S.E.O and accessibility. you can read about accessibility here
Marked as helpful
