Issue with CSS Media Queries: Preventing an Element From Being Affected

As a complete beginner in HTML and CSS, I have a question that may seem silly. Recently, I created 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) {
  .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;
  }

  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 class="container">

  <div class="illustration-hero"></div>
  <div class="order">Order Summary</div>
  <p>You can now listen to millions of songs,<br> audiobooks, and podcasts on any device <br> anywhere you like!
  </p>

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

  <button class="button">Proceed to Payment</button>

However, when viewed at a width of 375px, such as an iPhone X, the element with the class .illustration-hero (the blue rectangular image) does not display the border radius or flex-start alignment.

I attempted to replicate the desktop version attributes for .illustration-hero within the media query but saw no changes.

The issue remains: why does .illustration-hero not show the border-radius or flex-start alignment in the iPhone X version?

htmlcss

Answer №1

Deciphering your query is proving to be quite challenging. From analyzing your code, it seems that:

  1. The media query lacks a specified border radius value, hence the absence of any applied border radius?
  2. Have you attempted duplicating the border radius values within the media query without seeing any effect?

Please confirm if my interpretation aligns with your concerns.

  1. You seem to be structuring your media query from top to bottom, meaning you define CSS for large screens first and then for smaller devices. As a result, the border radius defined at the top (for desktop) automatically trickles down to smaller devices. If this is not your intended outcome, consider reversing your approach to bottom to top.

  2. If the border radius does not appear as expected, it could be due to the image size being ‘contain’ while the parent div's height is smaller than its width. Consequently, the image fails to cover the entire width, resulting in the lack of visible border radius.

To offer clarity, here’s an example following the top-bottom approach:

.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 class="container">
  <div class="illustration-hero"></div>

Answer №2

From my interpretation of your query... it seems like you're questioning why styles are being applied within the media max-width... if this is indeed what you're asking, then the explanation lies in the fact that a media query doesn't completely remove all previous styling, but rather overrides specific properties. This means that in order to overwrite a style using a media query, you must define those properties within the media block. If this isn't the clarification you were seeking, consider rephrasing your question.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Errors are not being shown on mandatory fields in the form

After watching a tutorial video, I attempted to create a sign-up form. However, despite following all the steps, I encountered an issue where the Surname and Given name fields, which I set as required fields, were still processing blank when the form was s ...

phphtmlcssforms

The issue with ui-router failing to render the template in MVC5

I'm having trouble setting up a basic Angular UI-Router configuration. My goal right now is to have a hardcoded template render properly, and then work on loading an external .html file. My project is using MVC5, so I'll provide the necessary fi ...

javascripthtmlangularjsasp.net-mvc-5

Issue with implementing custom fonts using @font-face

I've added custom @font-face styling to my CSS using a downloaded font, but it doesn't seem to be working. Below is my CSS code: @font-face { font-family: "Quicksand"; src: url("fonts/Quicksand/Quicksand-Light.otf") format("opentype"); } The f ...

htmlcssfont-face

Issue with GridLayout causing rows to be misaligned

As a newcomer to the world of CSS, I found myself in need of a grid layout for a quick project. Here's the mishmash of CSS code I came up with: body { margin: 40px; } .container { display: grid; grid-template-rows: [row1start] 20% [row2sta ...

cssflaskcss-grid

How can I make a DIV occupy the entire vertical space of the page?

I am working on a Google Maps application that takes up the majority of the screen. However, I need to reserve a strip at the top for a menu bar. How can I ensure that the map div fills the remaining vertical space without being pushed past the bottom of ...

csshtml

How can I adjust the padding and width attributes of the mat-menu in Angular 5

Today, I am struggling with a piece of code. Whenever I click on the Details button, it is supposed to open a mat-menu. However, for some reason, I cannot seem to adjust the padding or width of the menu: <div id="box-upload" [hidden]="hiddenBoxUpload" ...

htmlcssangulartypescriptangular-material

"Customizing a footer to resemble a bootstrap nav-bar: A step-by-step guide

My situation involves the need to have a footer that functions similarly to a navbar. I want to be able to hide the list items of a ul list by clicking on a custom button, similar to the functionality of the bootstrap hamburger menu. Is it possible to use ...

htmlcsstwitter-bootstraptwitter-bootstrap-3css-transitions

Utilizing if conditions within loops in a Jade template

Hey there. I am attempting to create a `tr` element at the start and after every 9th item. I am using the modulo operator as shown in the example above. However, if I want to include `td` elements inside that same `tr`, with an `else` condition for inst ...

htmlnode.jsexpresspugeach

Displaying JQuery dialogs briefly show their contents before the page finishes loading

Utilizing jquery 1.10.3, I am creating a dialog that is quite intricate. When I say 'intricate', I mean that the dialog's content includes data from a database, such as dropdown lists populated by the results of database queries, alongside s ...

phpjqueryhtmljquery-ui-dialogvisual-artifacts

When using jquery, the .css("border-color") method fails to provide a return value

I came up with the jquery javascript below $(document).mousemove(function(event) { var element = event.target; $(element).css("border","black solid 1px"); }); $(document).mouseout(function(event) { var element = event.target; console.log ...

jquerycssborder

Executing a function on each page within the head tag in Nuxt.js

I successfully made my function accessible by using the plugin attribute in the nuxt.config.js file, allowing me to call the function under mounted on every page. I am looking for a more efficient way to run this function within the head tag and have it b ...

javascripthtmlcssvue.jsnuxt.js

Arranging CSS text in a parallel format and aligning it vertically

I am working on a layout with two columns of text placed side by side, where one column is right aligned and the other is left aligned. Below is my current code: .alignleft { float: left; } .alignright { float: right; } .list-unstyled { padding ...

htmlcss

The website is failing to extend and reveal content that is being concealed by jQuery

I'm currently diving into the world of Javascript and jQuery, attempting to create a functionality where upon clicking the submit button, the website dynamically expands to display search information. Although the feature is still in progress, I am ut ...

javascriptjqueryhtmlcss

iOS fixed positioning and scrolling

One of the current challenges we are facing involves implementing an action button similar to the one found in GMail for adding new content. This button needs to remain fixed during scroll. Here is the HTML code: <div class="addButton actionButton" on ...

javascriptioscsscss-position

Activate all inactive input and selection elements

I need a solution to enable all disabled input and select elements before submitting the form in order to retrieve the values of those disabled elements. Here is what I have tried: function enable() { $('input[type="text"], input[type="chec ...

jqueryhtmlperformance

Sort columns using drag and drop feature in jQuery and AngularJS

Utilizing the drag and drop feature of jquery dragtable.js is causing compatibility issues with AngularJs, hindering table sorting functionality. The goal is to enable column sorting by clicking on the th label and allow for column rearrangement. Currentl ...

javascriptjqueryhtmlangularjs

What is the best way to ensure that the text input in a text area is linked to a particular radio

I have created a form that contains radio buttons. My next goal is to include a text area next to each group of radio buttons. This will allow the user to select an option either by clicking on the radio button or by typing in the corresponding value in t ...

htmlformsradio-buttontextareaentity-relationship

store the id of each li element dynamically into an array

In my code, a list is generated dynamically and each list item has a special id. I am trying to store each li "id" in one array. This is JavaScript code: var i = 0; $("ul#portfolio li").each(function(eval) { var idd = new Array(); idd[i] = $(this ...

javascriptjqueryhtml

Is there a way to have content update automatically?

After writing this block of code, I discovered that clicking on one of the circles activates it and displays the corresponding content. Now, I am looking for a way to automate this process so that every 5 seconds, a new circle gets activated along with its ...

javascriptjavahtmlcssautomation

Migrating a few PHP scripts to ColdFusion

Hey there, I'm currently in the process of converting some really basic PHP code to be compatible with a development server that only supports CF. This is completely new territory for me, so I'm looking for some guidance on how to port a few thin ...

phpcssvariablescoldfusionporting