I want the first two boxes be up with the max width and the seconed two boxes be down with the max width and here are the codes.
This is the CSS Code:
/* Start Services */
.services {
padding-top: var(--section-pading);
padding-bottom: var(--section-pading);
}
@media (min-widht: 768px) {
.services .services-contianer {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
}
}
.services .box {
display: flex;
}
.services .box i{
margin-right: 50px;
}
.services .box h3{
margin-bottom: 30px;
color: var(--main-color);
}
.services .box p{
line-height: 2;
}
/* End Services */
This is the HTML Code:
<!-- Start Services -->
<div class="services">
<div class="container">
<div class="main-heading">
<h2>Services</h2>
<p> Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris
blandit aliquet elit, eget tincidunt.
</p>
</div>
<div class="services-container">
<div class="box">
<i class="fa-solid fa-display fa-3x"></i>
<div class="text">
<h3>Vorem amet intuitive</h3>
<p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at
sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar
a. Curabitur aliquet quam.</p>
</div>
</div>
</div>
<div class="services-container">
<div class="box">
<i class="fa-solid fa-gear fa-3x"></i>
<div class="text">
<h3>Vorem amet intuitive</h3>
<p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at
sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar
a. Curabitur aliquet quam.</p>
</div>
</div>
</div>
<div class="services-container">
<div class="box">
<i class="fa-solid fa-pen-ruler fa-3x"></i>
<div class="text">
<h3>Vorem amet intuitive</h3>
<p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at
sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar
a. Curabitur aliquet quam.</p>
</div>
</div>
</div>
<div class="services-container">
<div class="box">
<i class="fa-solid fa-camera fa-3x"></i>
<div class="text">
<h3>Vorem amet intuitive</h3>
<p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at
sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar
a. Curabitur aliquet quam.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Services -->
This is the result that I have :
I want the design to be like the image below I wnat 2 boxes up and 2 down :
Can You Help??
2
Answers
As I checked the code, There was spellings mistakes in the CSS code. And I’ve made some changes in the HTML code.
Spelling Mistakes:
Please check the Updated below code:
add this styles in this code have some mistakes.
instead of this you remove this code
and add this CSS code hope you achieve the exact what output you want