Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Responsive

Issue With Creating A Responsive Program With Media Queries

Post a Comment
I'm trying to create a simple responsive program, that will change the text depending on the screen size. I created 2 div tags that should show up, one is for people who are on PC

Solution 1:

A couple issues:

  1. You should use the meta viewport tag.
  2. In your media query, you never set the element to display or change the visibility. CSS reads ALL of your styles, so you need to actually change the property.

In the example below, you see I set the display property on both of your elements - inside and outside of the media_query

.PC {
  font-family: Roboto;
  font-size: 100px;
  text-shadow: 2px1px2px gray;
  position: absolute;
  margin: auto;
  top: 50%;
  left: 50%;
  padding: 15px;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: block;
}

.Mobile {
  font-family: Roboto;
  font-size: 100px;
  text-shadow: 2px1px2px gray;
  position: absolute;
  margin: auto;
  top: 50%;
  left: 50%;
  padding: 15px;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: none;
}

@media (max-width: 620px) {
  .Mobile {
    display: block;
  }
  .PC {
    display: none;
  }
}
<!DOCTYPE html><html><head><title>Media Query</title><metaname="viewport"content="width=device-width, initial-scale=1"><linkhref="https://fonts.googleapis.com/css?family=Roboto&display=swap"rel="stylesheet"></head><body><pclass="PC"><strong>PC</strong></p><pclass="Mobile"><strong>Mobile</strong></p></body></html>

Post a Comment for "Issue With Creating A Responsive Program With Media Queries"