I'm trying to build a product landing page as a certificate project for freeCodeCamp.
I can't understand how to fix the icons to the left, while fixing the feature and price to the center. And I can't understand why my li items are overflowing over their container.
I tried all the overflow and wrap tags I know but I can't work it out.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: 'Montserrat', sans-serif;
}
#logo {
position: absolute;
width: 25%;
left: 0;
height: auto;
image-resolution: 100%;
}
header {
width: 100%;
display: flex;
justify-content: space-evenly;
}
.navspace {
justify-content: end;
position: relative;
right: -15%;
}
nav {
positio: relative;
}
ul {
display: flex;
list-style: none;
}
li {
margin: 40px;
}
.product {
position: absolute;
top: 15%;
}
#leads {
width: 100vw;
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
align-items: center;
}
.title {
padding: 2%;
}
#logo-green {
width: 5vw;
height: auto;
margin-right: 5vw;
}
#Features {
margin-left: 27%;
display: flex;
align-items: left;
justify-content: left;
text-align: left;
padding: 5%;
}
#Price {
display: flex;
align-items: center;
justify-content: left;
text-align: center;
padding: 3%;
margin-left: 27%;
}
.price {
display: flex;
flex-direction: column;
text-align: left;
}
.pricelist {
width: 100%;
max-height: 400px;
text-align: center;
position: absolute;
display: inline-flex;
justify-content: center;
}
.class {
width: 300px;
height: 300px;
border: 1px solid black;
margin: 20px;
}
.class>h1 {
width: 100%;
height: 10%;
background-color: blanchedalmond;
padding: 2%;
font-size: large;
}
#medium,
#pika,
#base {
display: flex;
flex-direction: column;
}
.class>h2 {
margin: 5% 0 5% 0;
}
.class>ul {
display: grid;
display: flex;
justify-content: center;
flex-direction: column;
gap: 2px;
}
.class>li {
position: relative;
}<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<!-- tabella nav -->
<header>
<div>
<img id="logo" src="img/LIGHTSPEED.png" alt="" />
</div>
<!-- bhr -->
<div >
<nav id="nav-link">
<ul>
<li>Features</li>
<li>Price</li>
<li>Contacts</li>
</ul>
</nav>
</div>
</header>
<main >
<!-- form -->
<section id="leads">
<h2 >Most efficient way to light your life</h2>
<form action="">
<input type="email" required placeholder="Enter your email" columns="10">
<input type="submit" value="Get Shocked">
</form>
</section>
<!-- features -->
<section>
<div id="Features">
<div id="green">
<img id="logo-green" src="img/294432.png" alt="">
</div>
<div >
<h2>Only from renovable energy</h2>
<p>Coming from water and earth termal energy</p>
</div>
</div>
</section>
<!-- price -->
<section>
<div id="Price">
<div id="cheap">
<img id="logo-green" src="img/low-price.png" alt="">
</div>
<div >
<h2>Prices you have never seen</h2>
<p>With our funding system you might get some solar panels</p>
<p>and who knows... we might pay you your energy.</p>
</div>
</div>
</section>
<div >
<div id="base">
<h1>BASE LEVEL</h1>
<h2>49€</h2>
<ul>
<li>Standart power transmission</li>
<li>Change power output by your personal profile</li>
<li>Client Support 10am-20am</li>
</ul>
</div>
<div id="medium">
<h1>MEDIUM LEVEL</h1>
<h2>59€</h2>
</div>
<div id="pika">
<h1>PIKACHU LEVEL</h1>
<h2>149€</h2>
</div>
</div>
</main>CodePudding user response：
A few things right off the bat, i've added some comments to your CSS. There's a lot going on here, and I think a lot of your styling is just working against you.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: 'Montserrat', sans-serif;
}
#logo {
position: absolute;
width: 25%;
left: 0;
height: auto;
image-resolution: 100%;
}
header {
width: 100%;
display: flex;
justify-content: space-evenly;
}
.navspace {
justify-content: end;
position: relative;
right: -15%;
}
nav {
position: relative; /* <- mispelled positio[n] */
}
ul {
display: flex;
list-style: none;
}
li {
margin: 40px;
}
.product {
position: absolute; /* I hate position absolute. Hate it deeply. Basically refuse to use it. It never works the way I want it to. More on this in response below */
top: 15%;
}
#leads {
width: 100vw;
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
align-items: center;
}
.title {
padding: 2%;
}
#logo-green {
width: 5vw;
height: auto;
margin-right: 5vw;
}
#Features {
margin-left: 27%;
display: flex;
align-items: left;
justify-content: left;
text-align: left;
padding: 5%;
}
#Price { /* be careful, classes and Ids are case sensitive*/
display: flex;
align-items: center;
justify-content: left;
text-align: center;
padding: 3%;
margin-left: 27%;
}
.price {
display: flex;
flex-direction: column;
text-align: left;
}
.pricelist {
width: 100%;
max-height: 400px;
text-align: center;
position: absolute;
display: inline-flex; /* technically, unless this object has a sibling, making it inline-flex while it is position: absolute; won't really change anything... though it could in unexpected ways. More below*/
justify-content: center;
}
.class {
width: 300px;
height: 300px;
border: 1px solid black;
margin: 20px;
}
.class>h1 {
width: 100%;
height: 10%;
background-color: blanchedalmond;
padding: 2%;
font-size: large;
}
#medium,
#pika,
#base {
display: flex;
flex-direction: column;
}
.class>h2 {
margin: 5% 0 5% 0;
}
.class>ul {
display: grid;
display: flex;/* display grid is just being overridden by display flex here, so there's no point in keeping it */
justify-content: center;
flex-direction: column;
gap: 2px;
}
.class>li {
position: relative;
}<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<!-- tabella nav -->
<header>
<div>
<img id="logo" src="img/LIGHTSPEED.png" alt="" />
</div>
<!-- bhr -->
<div >
<nav id="nav-link">
<ul>
<li>Features</li>
<li>Price</li>
<li>Contacts</li>
</ul>
</nav>
</div>
</header>
<main >
<!-- form -->
<section id="leads">
<h2 >Most efficient way to light your life</h2>
<form action="">
<input type="email" required placeholder="Enter your email" columns="10">
<input type="submit" value="Get Shocked">
</form>
</section>
<!-- features -->
<section>
<div id="Features">
<div id="green">
<img id="logo-green" src="img/294432.png" alt="">
</div>
<div >
<h2>Only from renovable energy</h2>
<p>Coming from water and earth termal energy</p>
</div>
</div>
</section>
<!-- price -->
<section>
<div id="Price">
<div id="cheap">
<img id="logo-green" src="img/low-price.png" alt="">
</div>
<div >
<h2>Prices you have never seen</h2>
<p>With our funding system you might get some solar panels</p>
<p>and who knows... we might pay you your energy.</p>
</div>
</div>
</section>
<div >
<div id="base">
<h1>BASE LEVEL</h1>
<h2>49€</h2>
<ul>
<li>Standart power transmission</li>
<li>Change power output by your personal profile</li>
<li>Client Support 10am-20am</li>
</ul>
</div>
<div id="medium">
<h1>MEDIUM LEVEL</h1>
<h2>59€</h2>
</div>
<div id="pika">
<h1>PIKACHU LEVEL</h1>
<h2>149€</h2>
</div>
</div>
</main>First off, while it is somewhat a personal choice and somewhat just the way most people use CSS these days: I hate position: absolute. It never acts the way you want it to, it's very difficult to get it to be responsive, and there are better ways to do it these days. The problem with absolute is that it simultaneously breaks an object out of the standard flow of the document, but it also gets rid of the object's ability to affect other objects in the document. This means that a div with position:absolute will no longer push down its sibling objects (things next to it), hold space within the parent object (the thing holding it will act like it has nothing inside it). While it's more complicated, using grid to break objects out of the normal document flow is more predictable.
Let's take a look at your code simply without position: absolute:
https://jsfiddle.net/slingtruchoice/sye5wbmu/
already, things aren't breaking outside of your boxes.
Your best bet to get things to align is to use use margin and display:block. Remember, inline items don't hold their own line in a document, they allow other inline items to butt up next to them in the same line, so they won't be affected by margin and padding in the same way. display:inline-block fixes some of that, but not everything.
i literally have this as a poster in my office. I've been doing this for ten years and still use it daily: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
if an item is overflowing out of the container, it's because the container isn't recognizing that it needs to be affected by the child's size. This either means that the parent has a fixed size that overrides the child's desire to make the parent bigger (like a pregnant lady wearing a corset, as my teacher always said... such a weird image).
It may also mean that the child's size isn't affecting things around it, such as a position:absolute or display:inline item that is acting weird. If you have display:flex and flex-wrap: nowrap on the parent, but the children are set to have a size larger than the parent object, then they will overflow.
CodePudding user response：
I'm sure about what icons you are talking about, I would be happy to help you If can clarify the issue. Now about the why your li items are overflowing over their container.
In your CSS on the line number 94 and 103 you set max-height: 400px; and height: 300px; because of that your li items are overflowing.
One way you can fix this bye removing fix height and set the value height: auto; that will make the parent container automatically grow based on their child element, or you can give your ul element a class or ID and then set overflow-y: scroll; to that ID or class.
CodePudding user response：
This is the code freecodecamp is using to design the middle section with the icon.
.grid {
display: flex;
}
#features .icon {
display: flex;
align-items: center;
justify-content: center;
height: 125px;
width: 20vw;
color: darkorange;
}
#features .desc {
display: flex;
flex-direction: column;
justify-content: center;
height: 125px;
width: 80vw;
padding: 5px;
}<!-- Wrapper -->
<div >
<!-- Icon -->
<div >
<i ></i>
</div>
<!-- /Icon -->
<!-- Description -->
<div >
<h2>Premium Materials</h2>
<p> Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase. </p>
</div>
<!-- /Description -->
</div>
<!-- /Wrapper -->Now let me explain what is going on here. The div with the class name grid is the parent element for both icon and the desc So they set display of grid to display: flex; and give both child element fix width width: 20vw; and width: 80vw;
And I like to add one little note, That If you are using position: absolute; to any element then It's a good idea to set Its parent to position: relative; That would make working with position a lot easier.