DEV Community

Cover image for Responsive Local Club
Heggy Castaneda
Heggy Castaneda

Posted on • Edited on

Responsive Local Club

To have img auto centered horizontally:

img {
  /* prevent weird alignment with other elements */
  display: block;
  /* keep it centered */
  margin: auto;
}

Different width to target for media query:

/* landscape tablet */
@media only screen and (max-width: 960px) {
  .main, header {
    height: auto;
  }
}

/* vertical tablet */
@media only screen and (max-width: 700px) {
  li {
    display: block;
    padding: 0.5rem 0.9rem;
    text-align: center;
  }
}

/* smart phone */
@media only screen and (max-width: 470px) {
  .quote q, .location p {
    font-size: 1.3rem;
  }
}

Top comments (0)