@media (min-width: 930px)
body {
min-height: 100vh;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
/* width: 730px; */
/* height: 280px; */
}
body {
/* outline: 2px solid darkblue; */
display: flex;
flex-direction: column;
align-items: center;
/* width: 327px; */
/* height: 512px; */
/* margin: 20px auto; */
background: #ffffff;
box-shadow: 0px 40px 40px -10px rgba(201, 213, 225, 0.503415);
border-radius: 10px;
}
remove the lines that has /* */ around them
your layout will fall apart on smaller screens, because you applied fixed width on your elements. If you want to resolve the issue just let the child elements determine the width of the container, you can still apply padding to it, so you get the desired design
also wrap your entire element in a container div, so you can give the body a background color, separating it from your element.
Marked as helpful
@kodan96,
Your responses are very helpful! Thank you! I am still stumbling my through this coding thing so let me clarify a couple two points if you don't mind.
First, are you suggesting not having fixed widths on any of the code or just specifically on the mobile section?
Second, are you suggesting that I have one HTML tag (e.g. a div element) that is the child element of the body tag and which wraps all of the other elements of the page?
Again, thanks so much for the helpful feedback!
@rtoddm
to your first question: it's generally not a good practice to define width to your elements, especially not by defining them with hard-coded values (pixels). they'll adapt to their content's size by default. if you want to control their size you can use max-width. you can even combine it with the width property:
.element {
width: 90%;
max-width: 60rem;
}
here .element will take up 90% of its container's width, but when it reaches the 60rem width it won't expand anymore.
second question: yes, like this:
<body>
<div class="container">
<---------------------All your content goes here--------------------------->
</div> <---------------closing tag of .container
</body>
this way you can apply display: flex; to the container element and, give it padding and you are more or less good to go
Marked as helpful
@kodan96
That's very clear and helpful!! Thanks for taking the time to offer all of that feedback!
