skip to Main Content

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 :

enter image description here

I want the design to be like the image below I wnat 2 boxes up and 2 down :

enter image description here

Can You Help??

2

Answers


  1. 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:
    Spelling Mistakes

    Please check the Updated below code:

    /* Start Services  */
    .services {
        padding-top: var(--section-pading);
        padding-bottom: var(--section-pading);
    }
    @media (min-width: 768px) {
        .services .services-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
    /*       background-color: red; */
        }
    }
    .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  */
     <!-- 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 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 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 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 -->
    Login or Signup to reply.
  2. add this styles in this code have some mistakes.

    instead of this you remove this code

    @media (min-widht: 768px) {
        .services .services-contianer {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
        }
    }
    

    and add this CSS code hope you achieve the exact what output you want

    .container {
      display: flex;
      flex-wrap: wrap;
    }
    
    .services-container .box {
      width : 400px;
      min-width: 50%;
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search