Question 212311 in CSS Question posted in
Some basic documentation can be found here.

Css – How to make the social icons display horizontal for small sceen

.socials {
  position: absolute;
  margin-left: 10px;
  top: 30%;
  left: 2%;
  list-style: none;
  overflow: hidden;
  @media (max-width: 550px) {
    display: inline-block;
    position: absolute;
  }
  & ul {
    list-style: none;
    padding: 0;
  }
  & li {
    margin: 10px;
    font-size: 35px;
    padding: 20px;
    @media (max-width: 550px) {
      margin: 10px;
      font-size: 25px;
      padding: 10px;
    }
    & a {
      color: #fff;
      text-decoration: none !important;
       :hover {
        cursor: pointer;
        opacity: 1;
        transition: 0.1s;
        color: #ffffff92;
      }
    }
  }
}

I am developing my portfolio to display my social icons; on large screens these should be vertical, and on small screens I have added display: inline-block; to make them horizontal. But this is not working.

Tags:

2

Answers


  1. 0

    this should work fine

    @media (max-width: 550px) {
    & ul {
       display:flex;
       flex-direction:column;
    }
    Login or Signup to reply.
  2. 0

    I recommend giving this a try, but its suitability will depend on your HTML context.

    @media (max-width:550px) {
 & ul {
  display:flex;
 }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search