Let's talk about making your page responsive without using Media Queries.

facing problems while using media queries?? Now you won't!! Flex-box and Grid will do it for you. So here we are going to touch our toes into the power of CSS Flex-box and Grid by building a couple of common responsive navigation layouts.

Now before starting, What is flex-box???🤔

The flex CSS is a shorthand property that sets how a flex item will grow or shrink to fit the space available in its flex container.

Layout 01 : Making clean Services page for pet website-

 <div class="services">
      <h2>Let's Build A Responsive Services Page</h2>
      <div class="service_box">
        <div class="service01">
            <div class="img"></div>
            <h3>Pet Health</h3>
            <p>Consult an online veterinary doctor for medical treatments and services. Pet-health is our 
                   priority, but to treat them professionally, keeping our best hands at service is our highest 
                   priority.
            </p>
        </div>
     </div>
 </div>

Let's look at the .services element: It contains all other elements that we are going to add in our page. Inside this we have an h2 tag and a element .service_box which contains the elements of a single service card. It has a another div .service01 which is a single card having an .img , a h3 tag with a title and a p tag with a description.

Styling our basic h2 and p tag inside our .services element

.services {
  height: 100vh;
  width: 100%;
  color: #405c5a;
}

.services > h2 {
  text-align: center;
  padding: 20px 0;
  font-size: 35px;
}

.services > p {
  text-align: center;
  font-weight: bold;
  font-size: 20px;
}

Now let's target .service_box which is inside the main element .services contains all the cards:

.Services .service_box {
      display: flex;   
      margin: auto 0;
      flex-wrap: wrap;   
      justify-content: space-around;
      text-align: center;
}

display:flex; what it will do, it will tell the elements inside it to arrange themselves in row which is a default property of flex. Now what if we want to arrange them in a column?? We have a solution for this also. flex-direction: column; this will tell the elements to arrange themselves in a column by defining the direction as column. Now what justify-content: space-around; will do is it tells the elements to take the equal space inside the parent element i.e , inside .service_box .

Now let's design the elements inside .service_box. We have our first card .service01 .

.service01 {
      margin: 20px 0px;
      width: 250px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      padding: 20px;
      box-shadow: 0 20px 30px #405c5a8e;
}

.service01 .img {
        height: 130px;
        width: 130px;
        border-radius: 50%;
        background: #405c5a;
        margin-bottom: 20px;
}

.service01  h3 {
        margin-bottom: 20px;
        font-size: 25px;
}

Now we had code the maximum elements with responsive without using media queries. But we have only on service card .service01 , lets add another 3 cards:

<div class="service_box">
        <div class="service01">
          <div class="img"></div>
          <h3>Pet Health</h3>
          <p>Consult an online veterinary doctor for medical treatments and services. Pet-health is our priority, but to treat them professionally, keeping our best hands at service is our highest priority.</p>
        </div>
        <div class="service02">
          <div class="img"></div>
          <h3>Pet Behaviour </h3>
          <p>Talk to vet online and know more about your pet behavior. Our expertise allows us to provide you with the best advice and remedies to deal with your pet swinging mood or any kind of unexpected behavior.</p>
        </div>
        <div class="service03">
          <div class="img"></div>
          <h3>Pet Training Advice</h3>
          <p>Almost every pet, especially dogs, needs training. But, you cannot blindly trust your pet into the hands of anyone randomly. We brief you about the best training programs & let you decide what is perfect for your pet.</p>
        </div>
        <div class="service04">
          <div class="img"></div>
          <h3>Second Opinion</h3>
          <p>Second thoughts crossing your minds over an already ongoing treatment for your pet? We are there to help you out. Contact our veterinary doctor online for a second opinion and get relieved from the worrying thoughts.</p>
        </div>
</div>

So, here is the complete code:

 <div class="Services">
      <h2>Get the answers you need, right when you need them</h2>
      <p>Consult with expert vets having more than 5+ years of experience</p>
      <div class="service_box">
        <div class="service01">
          <div class="img"></div>
          <h3>Pet Health</h3>
          <p>Consult an online veterinary doctor for medical treatments and services. Pet-health is our priority, but to treat them professionally, keeping our best hands at service is our highest priority.</p>
        </div>
        <div class="service02">
          <div class="img"></div>
          <h3>Pet Behaviour </h3>
          <p>Talk to vet online and know more about your pet behavior. Our expertise allows us to provide you with the best advice and remedies to deal with your pet swinging mood or any kind of unexpected behavior.</p>
        </div>
        <div class="service03">
          <div class="img"></div>
          <h3>Pet Training Advice</h3>
          <p>Almost every pet, especially dogs, needs training. But, you cannot blindly trust your pet into the hands of anyone randomly. We brief you about the best training programs & let you decide what is perfect for your pet.</p>
        </div>
        <div class="service04">
          <div class="img"></div>
          <h3>Second Opinion</h3>
          <p>Second thoughts crossing your minds over an already ongoing treatment for your pet? We are there to help you out. Contact our veterinary doctor online for a second opinion and get relieved from the worrying thoughts.</p>
        </div>
      </div>
    </div>

CSS code:

.Services {
  height: 100vh;
  width: 100%;
  color: #405c5a;
}

.Services > h2 {
  text-align: center;
  padding: 20px 0;
  font-size: 35px;
}

.Services > p {
  text-align: center;
  font-weight: bold;
  font-size: 20px;
}

.Services .service_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: auto 0;
  flex-wrap: wrap;
  justify-content: space-around;
  text-align: center;
}

.Services .service_box .service01,
.Services .service_box .service02,
.Services .service_box .service03,
.Services .service_box .service04 {
  margin: 20px 0px;
  width: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;
  box-shadow: 0 20px 30px #405c5a8e;
}

.Services .service_box .service01 .img,
.Services .service_box .service02 .img,
.Services .service_box .service03 .img,
.Services .service_box .service04 .img {
  height: 130px;
  width: 130px;
  border-radius: 50%;
  background: #405c5a;
  margin-bottom: 20px;
}

.Services .service_box .service01 h3,
.Services .service_box .service02 h3,
.Services .service_box .service03 h3,
.Services .service_box .service04 h3 {
  margin-bottom: 20px;
  font-size: 25px;
}

.Services .service_box .service01 p,
.Services .service_box .service02 p,
.Services .service_box .service03 p,
.Services .service_box .service04 p {
  font-weight: bold;
}
/*# sourceMappingURL=services.css.map */

So, here we created our services page(responsive). [See the code with result] (codepen.io/PiyushSolakhiya/pen/dyvovbx?edit..)

Thank You!!