CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
Alex Jacobson
Alex Jacobson

Reputation: 197

Why doesn't my media screen query work, I can't make my website responsive?

There could be two-four columns of my articles, depending on the screen size. I used media query for my article class of title. However, nothing seems to happen when the site is displayed on different resolutions.

I tried adding @media ONLY screen instead of @media screen but this does not work neither.

<!-- single skill (x4) -->

      <article class="skill">
        <span class="skill-icon">
          <i class="fas fa-paint-brush"></i>
        </span>
        <h3 class="skill-title">креативно сликање</h3>
        <p class="skill-text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, rem!
        </p>
      </article>

<!-- end single skill -->


@media screen and (min-width: 576px) {
  .skill {
    float: left;
    width: 50%;
  }
}
@media screen and (min-width: 1200px) {
  .skill {
    width: 25%;
  }
}

What should I change in my code in order to get two or four columns of articles on 576px and 1200px screens respectively?

Upvotes: 0

Views: 61

Answers (2)

GirlMeetsCode
GirlMeetsCode

Reputation: 33

Code is working for me as is. Pasted the 4 articles in HTML and when the screen is resized, it drops down to 2 articles per row as you're wanting. Is there a particular device, OS or browser this isn't working for you on?

Upvotes: 1

Connor Brown
Connor Brown

Reputation: 175

Have you tried using @media only, but lowercase? seems to work for me with the following.

Have a look at it on codepen working here: https://codepen.io/CTBroon/pen/xxKOEGq

 @media only screen and (min-width: 576px) {
  .skill {
    float: left;
    width: 50%;
  }
}
@media only screen and (min-width: 1200px) {
  .skill {
    width: 25%;
  }
}

Upvotes: 0

Related Questions