aligning divs a certain way when the screen size is smaller

user_19495198 0
Viewed 34

I have a page on my website with two cards that display projects however when the screen size is such that its on a phone it looks like this:

enter image description here

I would like to know if there is a way to stack them on top of each other maybe when the screen size is small. Since it is two boxes I was wondering if they could be on top of each other I assume in CSS. Any solution I would take.

Here is the code:

.contact {
  background-color: #1e2029;
}

.title,
.head,
.text {
  color: #fff;
}

.services,
.teams {
  color: #fff;
  background-color: #1e2029;
}

.services .title::before,
.teams .title::before {
  background-color: #1e2029;
  color: #ffff;
}

.services .title::after,
.teams .title::after {
  background: #111;
  content: "what I've made";
}

.services .serv-content .card {
  width: calc(33% - 20px);
  background: #222;
  text-align: center;
  border-radius: 6px;
  padding: 50px 25px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.services .serv-content .card:hover {
  background: #ac5fdb;
}

.services .serv-content .card .box {
  transition: all 0.3s ease;
}

.services .serv-content .card:hover .box {
  transform: scale(1.05);
}

.services .serv-content .card i {
  font-size: 50px;
  color: #ac5fdb;
  transition: color 0.3s ease;
}

.services .serv-content .card:hover i {
  color: #fff;
}

.services .serv-content .card .text {
  font-size: 25px;
  font-weight: 500;
  margin: 10px 0 7px 0;
}
<section class="services" id="services">
  <div class="max-width">
    <h2 class="title">My Projects </h2>
    <div class="serv-content">
      <div class="card">
        <div class="box">
          <i class="fas fa-paint-brush"></i>
          <div class="text">MSU Computer Club Website</div>
          <p>I helped create the website for Montclair State University's Computer Club.
            Using HTML, CSS, JS.
          </p>
          <a href="https://msucomputerclub.github.io/">View</a>
        </div>
      </div>
      <div class="card">
        <div class="box">
          <i class="fas fa-chart-line"></i>
          <div class="text">Persoanl Portfolio Website</div>
          <p>I created this website using HTML, CSS, Javascript, and PHP to showcases my skills</p>
          <a href="https://www.meeteddie.tech/">View</a>
        </div>
      </div>

When you run the snippet it shows them stacked however as you can see in the photo that does not happen.

Any help would be Great!

css html
1 Answers

You can use @media for this. You can change the width of the .card depending on the width of the viewport.

First of all, you pasted this media query at the top which was later overridden by your css below it. Try pasting it at the bottom.

Upon further inspection, it turns out that .max-width had a padding of 80px on both left and right sides which caused the content to shrink.

@media (max-width: 991px) {

   .services .max-width {
      padding: 0;   
    }
   .services .serv-content,
   .services .serv-content .card {
      width: 100%; 
   }
   
}
user_139197300
Related