CODEWITHSUNDEEP
htmlcss
Chenius
Chenius

Reputation: 131

How to position social media icons using @media for max width?

I created 5 social media icons, which I centered in the middle of the page, which are all situated next to each other on the same line. I want the social media icons to be aligned to the left margin of the page and displayed underneath each other when the window size is reduced. I tried the following code but it didn't work.(When I reduce the size of the window, the icons align underneath each other but are still centered in the middle of the page, I want them aligned to the left.)

@media (max-width: 1200px) {
  .ul {
    display: none;
  }
  .bars2 {
    display: block;
  }
  .social {
    margin-left: 0;
    left: 0;
  }
  .social .fa {
    display: block;
  }
}

.fa {
  background-color: black;
  color: white;
  text-decoration: none;
  font-size: 30px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 10px;
}

.fa:hover {
  color: #7E7791;
  background: white;
}

#social {
  height: 40px;
  width: 300px;
  margin-top: 10%;
  position: absolute;
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}
<div id="social" class="social">
  <a href="#" class="fa fa-youtube-play"></a>
  <a href="#" class="fa fa-instagram"></a>
  <a href="#" class="fa fa-facebook"></a>
  <a href="#" class="fa fa-twitter"></a>
  <a href="#" class="fa fa-pinterest"></a>
</div>

Upvotes: 0

Views: 583

Answers (3)

eniglofs
eniglofs

Reputation: 11

It's because you set margin-left: auto; instead you should set it left.

Upvotes: 0

Julio Feferman
Julio Feferman

Reputation: 2676

I placed the @media query after your remaining selectors so it is not overriden. Also, I created a new id selector to override the margins set previously:

#social {
  margin: 10% 0 0 0;
}

Hope this helps.

.fa {
  background-color: black;
  color: white;
  text-decoration: none;
  font-size: 30px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 10px;
}

.fa:hover {
  color: #7E7791;
  background: white;
}

#social {
  height: 40px;
  width: 300px;
  margin-top: 10%;
  position: absolute;
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

@media (max-width: 1200px) {
  .ul {
    display: none;
  }
  .bars2 {
    display: block;
  }
  .social {
    left: 0;
  }
  .social .fa {
    display: block;
  }
  
  #social {
    margin: 10% 0 0 0;
  }
}
<div id="social" class="social">
  <a href="#" class="fa fa-youtube-play"></a>
  <a href="#" class="fa fa-instagram"></a>
  <a href="#" class="fa fa-facebook"></a>
  <a href="#" class="fa fa-twitter"></a>
  <a href="#" class="fa fa-pinterest"></a>
</div>

Upvotes: 1

Gerardo BLANCO
Gerardo BLANCO

Reputation: 5648

Your style look good. The problem is with your selectors, 2 main problems

1- You need to put media querys at the bottom of your document. Remember css is a cascading language and will give priority to the last style.

2- Once you did the 1st point, css also gives priority to the style depending of the level of the selectors. You gave a value of auto with the id selector, and a value of 0 to the class selector. This gives priority to de id selector. Therefor you dont get that 0 value

Hope thi helps :)

.fa {
  background-color: black;
  color: white;
  text-decoration: none;
  font-size: 30px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 10px;
}

.fa:hover {
  color: #7E7791;
  background: white;
}

#social {
  height: 40px;
  width: 300px;
  margin-top: 10%;
  position: absolute;
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}


@media (max-width: 1200px) {
  .ul {
    display: none;
  }
  .bars2 {
    display: block;
  }
#social {
    margin-left: 0;
    left: 0;
  }
  .social .fa {
    display: block;
  }
}
<div id="social" class="social">
  <a href="#" class="fa fa-youtube-play"></a>
  <a href="#" class="fa fa-instagram"></a>
  <a href="#" class="fa fa-facebook"></a>
  <a href="#" class="fa fa-twitter"></a>
  <a href="#" class="fa fa-pinterest"></a>
</div>

Upvotes: 3

Related Questions