@rostyslav-nazarenko
Posted
Hi! Nice and clean code!
- change
<div class="container">to <main class="container">` - use relative units for the width of elements and for media queries (inside the
pictureelement too). Change the font size in the browser to 18px and you will see the component break. - change
heighttomin-heighton thebodyelement. - change
overflow-x: hidden;tooverflow: hidden;
Marked as helpful
@YagyeshMani1498
Posted
@rostyslav-nazarenko thanks for your suggestion 😊😊 can you please check it again ?
@rostyslav-nazarenko
Posted
@YagyeshMani1498 checked looks good, one thing only. I'm not sure what this CSS reset does
/*
3. Allow percentage-based heights in the application
*/
html,
body {
height: 100%;
}
But it breaks the layout too
keep coding
@YagyeshMani1498
Posted
@rostyslav-nazarenko 1. Default value of height: auto; by this the container will grow its height as much as it needs to fit its child or content. by default ==>all html elements have height set to auto now----- 2. height: 100% -- means 100% of its parents height ; example: default html(height:auto), body(height:auto)
<html> <body> <h1>hello</h1> </body> </html> if we set h1 { height: 100%} then it will check its parent's height that is body(height:auto) -- and for body height:auto means height to fit h1 element; so here body's height will be equal to h1's height , so h1 {height: 100%} will equal to h1 original height that means we are setting a value that is already exists so nothing will happen. you can check it by yourself too. that's why i'm setting html,body(height:100%) so that h1 can grow as much as to its parent that is body. here is the codepen link [codepen](https://codepen.io/yagyeshmani1498) i hope that it will help you understand.@rostyslav-nazarenko
Posted
@YagyeshMani1498 Thanks, I understand now. The issue is that it somehow restricts the height of the viewport and doesn't allow scrolling. Look at the browser, the mobile view is cut.
@YagyeshMani1498
Posted
@rostyslav-nazarenko i think i should use min-height instead of height in /css-reset/ of html&body so that it can grow beyond its device height.
