@steveostler
Posted
Your solution looks good but does not display well on smaller screens. Try not to use width and heights on containers and let them expand to fit. Try taking the width and height rules off the gross_boite class and adding max-width:900px Take the width rule off the jolie-boite class On the img rule add width:100% and take off the margin rules
body{
background-color: hsl(30, 54%, 90%);
font-family: Outfit;
font-weight: 400;
font-size: small;
color:hsl(30, 10%, 34%);
margin: 50px;
font-size: 16px;
}
.grosse-boite{
background-color:hsl(0, 0%, 100%);
max-width: 900px;
/* width: 720px; */
/* height: 1525px; */
border-radius: 25px 25px 25px 25px;
margin: auto;
}
img{
width: 100%;
border-radius: 15px 15px 15px 15px;
/* margin-top: 45px; */
/* margin-left: 45px; */
/* margin-right: 45px; */
}
h1{
font-family: Young serif;
font-weight: 400;
margin-left: 45px;
margin-right: 45px;
color: hsl(24, 5%, 18%);
}
p{
font-family:Outfit;
font-weight: 400;
font-size: small;
margin-left: 45px;
margin-right: 45px;
}
.jolie-boite{
background-color: hsl(330, 100%, 98%);
/* width: 630px; */
height: 140px;
padding-top: 0.005%;
border-radius: 5px 5px 5px 5px;
margin-left: 45px;
margin-right: 45px;
}
h3{
color:hsl(332, 51%, 32%);
margin: 20px;
height: 10px;
border: 5px;
margin-left: 45px;
margin-right: 45px;
font-weight: 600;
}
ul{ list-style: none;}
li:before{
display: inline-block;
width: 2em;
margin-left: -1em;
margin-bottom: 0.5em;
}
li.prep-list:before{
content: "•";
color:hsl(332, 51%, 32%);
font-size: 16px;
}
li.ing-list:before{
content: "\25AA";
color: hsl(14, 45%, 36%);
margin-left: 15px;
font-size: 16px;
}
h2{
font-family: Young Serif;
color: hsl(14, 45%, 36%);
margin-left: 45px;
margin-right: 45px;
font-weight: 400;
}
ol{
list-style:none;
counter-reset: li;
margin-left: 65px;
margin-right: 65px;
}
ol li::before{
font-weight: 600;
font-size: 16px;
display: inline-block;
margin-left: -2.5em;
margin-right: 0.5em;
content: counter(li)". ";
color:hsl(14, 45%, 36%);
display:block;
margin-bottom: -25px;
line-height: 2rem;
font-size: 16px;
}
li {counter-increment : li}
table{
border-collapse: collapse;
width: 100%;
margin-left: 45px;
margin-right: 45px;
margin-bottom: 50px;
}
tr{
border-bottom: 1px
solid hsl(30, 18%, 87%);
}
tr.last-child{
border-bottom: 0;
}
th{
font-weight: 500;
text-align: left;
color:hsl(30, 10%, 34%);
padding-left:20px;
}
td{
font-weight: 600;
color: hsl(14, 45%, 36%);
padding:10px
}
.last-td{
border-bottom:none
}
hr{
border: 0.5pt solid hsl(30, 18%, 87%);
margin-left: 20px;
margin-right: 20px;
}
Marked as helpful
@Pennymrtn
Posted
@steveostler I just made the corrections you provided. It works wonders! Thank you so much for your help and for answering that quickly!