DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Responsive Local Club
Heggy Castaneda
Heggy Castaneda

Posted on • Updated 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)

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›