CSS Media query problem: element shouldn't be affected by media query-CodePudding

I'm a totally newbie of html and css, that's probably be a dumb question. Anyway, I wrote this HTML code:

* {
  margin: 0px;
  padding: 0;
  box-sizing: border-box;
}

p {
  font-size: 14px;
  font-family: 'Work Sans', 'sans serif';
  font-weight: 500;
  color: hsl(224, 23%, 55%);
  text-align: center;
  margin-top: 20px;
}

.button {
  font-size: 15px;
  font-weight: 700;
  border: none;
  font-family: 'Work Sans', 'sans serif';
  padding-top: 13px;
  padding-bottom: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: hsl(245, 75%, 52%);
  border-radius: 10px;
  cursor: pointer;
  margin-top: 30px;
  width: 75%;
  height: 6%;
  align-self: center;
  white-space: nowrap;
}

a {
  font-size: 15px;
  font-weight: 700;
  color: hsl(223, 47%, 23%);
  font-family: 'Work Sans', 'sans serif';
  text-decoration-style: underline;
}

body {
  background-image: url(images/pattern-background-desktop.svg);
  background-position-y: -270px;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: hsl(225, 100%, 94%);
}

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 23%;
  height: 80vh;
  margin-right: auto;
  margin-left: auto;
  margin-top: 60px;
  margin-bottom: 60px;
  border-radius: 25px;
  background-color: white;
}

.illustration-hero {
  width: 100%;
  height: 30%;
  justify-content: flex-start;
  background-image: url(images/illustration-hero.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  /* margin-bottom:210px; */
}

@media screen and (max-width:377px) {
  body {
    background-image: url(images/pattern-background-mobile.svg);
  }
  .container {
    width: 80%;
    display: flex;
    flex-direction: column;
  }
}

.order {
  margin-top: 40px;
  font-weight: 900;
  font-size: 25px;
  font-family: 'Work Sans', 'sans serif';
  color: hsl(223, 47%, 23%);
  font-style: bold;
  align-self: center;
}

.info {
  min-height: 15%;
  width: 80%;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  /* border:1px solid black; */
  background-color: hsl(225, 100%, 98%);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.info img {
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 5px;
}

.plan {
  height: 100%;
}

.plan ul {
  list-style-type: none;
  margin-left: 20px;
  align-self: center;
  margin-top: 20px;
  font-family: 'Work Sans', 'sans serif';
  font-weight: 900;
}

.price {
  font-family: 'Work Sans', 'sans serif';
  font-weight: 500;
  color: hsl(0, 0%, 67%);
}

.change {
  margin-left: 140px;
  margin-top: -25px;
}

<div >

  <div ></div>
  <div >Order Summary</div>
  <p>You can now listen to milions of songs,<br> audiobooks and podcast on any device <br> anywhere you like!
  </p>

  <div >
    <img  src="images/icon-music.svg" alt="Icon Music">
    <div >
      <ul>
        <li>Annual Plan</li>
        <li></li>
        <span >$59.99/year</span>
      </ul>
      <div >
        <a href="#">Change</a>
      </div>
    </div>
  </div>

  <button >Proceed to Payment</button>

The problem is the following: in responsive dimension width:1440px it's all perfect fine. In a Iphone-X dimension for example (width:375px) the element marked as .illustration-hero (the blue rectangular image) doesn't have border radius nether flex-start.

I tried to add in the media query .illustration-hero with the same attributes as in the desktop version, without any results.

The fact is that: why do .illustration-hero has not border-radius (nether flex-start) in the IPhone-X version?

CodePudding user response：

It's very difficult to understand what are you asking. According to going through your code what I understood is.

Media query has no border radius value written init so border radius shouldn't apply init ?
you tried to copy paste border radius values in media query and it's not affecting ?

Let me know if I'm understanding correctly.

you are writing media query in top bottom approach ie. you are writing css for Big screen and than for small devices so in you case you are giving border radius in Top ie. desktop which will auto apply to small devices. if you don't want this to happen than you need to change approach to bottom top.
Border radius is not showing because your image size is contain and height is parent div is smaller than width so image never covers the whole width and you don't see border radius

I'll write example for you in top bottom approach just to give you idea.

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 23%;
  height: 80vh;
  margin-right: auto;
  margin-left: auto;
  margin-top: 60px;
  margin-bottom: 60px;
  border-radius: 25px;
  background-color: white;
}

.illustration-hero {
  width: 100%;
  height: 30%;
  justify-content: flex-start;
  background-image: url('https://via.placeholder.com/300');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
}

@media screen and (max-width:377px) {
  body {
    background-image: url('https://via.placeholder.com/300/ff0000');
  }
  .container {
    width: 80%;
    display: flex;
    flex-direction: column;
  }
  
  .illustration-hero { 
    border-radius: 0;
  }
}

<div >
  <div ></div>

CodePudding user response：

As far as i understand your question... you are asking that why styles are applying under the media max-width... if that is your question, then the answer is media query doesn't remove all the previous styling but overwrites the specified properties, which means that If you want to overwrite a style through media query, you will have to specify those properties inside media block. . If this is not what you have asked, Try rephrasing your question.