How come the CSS styles I set for larger screens (1440px) are taking precedence over the ones I set for smaller screens (1280px)?

import styled from "styled-components";
import { devices } from "./devices";


export const HeaderContainer = styled.div`
  padding: 20px;
  @media ${devices.lg} {
    padding: 40px 90px;
  }
  @media ${devices.xl} {
    padding: 40px 215px 40px 150px;
  }
  @media ${devices.xxl} {
    padding: 40px 150px;
  }
`;

Moreover, this code snippet is utilized in various components, especially targeted at screen sizes of 1440px and 1280px.

The output displayed matches the following image captured through the Chrome Dev Tool:

View Screenshot from Chrome Dev Tool

javascriptcssresponsive-designmedia-queriesstyled-components

Answer №1

Upon reviewing your screenshot, it appears that you have received a warning for an invalid property value in the following code snippet:

@media ${devices.xl} {
padding: 40px 215px, 40px, 150px;
}

The issue seems to be with the presence of commas in the padding values. As shown in the code snippet you shared, there should be no commas present. Try removing the commas from your code. If the issue persists, consider restarting the development server or clearing your browser cache to ensure that the changes are applied properly.

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

Tips for preventing chunk loading in webpack: [Angular] [inline js]

Currently, I am working on bundling an Angular project into a single file that includes JS, CSS, and HTML. So far, I've successfully integrated the HTML and CSS, and have made the JS inline using HtmlWebpackInlineSourcePlugin. The minified JS files ge ...

javascriptangularwebpackinlinehtml-webpack-plugin

What is the best way to display an entire string in a DataGridPro cell without truncating it with an ellipsis?

After reviewing all of the available DataGrid documentation, I am still unable to find a solution for displaying strings in multiple lines within a cell without ellipses. The current behavior is as follows: https://i.stack.imgur.com/TO8vB.png What I am a ...

javascriptreactjsmaterial-uidatagrid

The div is empty when trying to display Google Maps

When I set the height of my Google map div in pixels, it displays correctly. However, when I try to set it as a percentage, specifically 100%, the map does not show up. I have tried setting the height of all parent divs as well, based on suggestions from S ...

htmlcssgoogle-maps

JavaScript function to display the anchor tag's title attribute in a modal when clicked

I am curious if you can assist me in finding the right path here. I have a PHP code that I would like to use onclick on dynamically created links to show the link's title in a modal window with a close option, similar to a tooltip. I prefer not to use ...

javascriptphpcss

Struggling with the installation of SimpLESS

I encountered an issue while attempting to install SimpLESS on my Windows 7 64bit PC. Upon running the installer, I was met with an error message stating: "Could not query info: Invalid HTTP Status Code (403)". Despite my efforts to search for a solution o ...

cssinstallationlesshttp-status-code-403

utilizing the setState function to insert an object into a deeply nested array

Currently, I am utilizing iReact setState to attempt posting data to my object which consists of nested arrays. Below is how my initial state looks: const [data, setData] = useState({ working_hours: [ { id: '', descrip ...

javascriptreactjs

Metronome in TypeScript

I am currently working on developing a metronome using Typescript within the Angular 2 framework. Many thanks to @Nitzan-Tomer for assisting me with the foundational concepts, as discussed in this Stack Overflow post: Typescript Loop with Delay. My curren ...

javascriptloopsangulartypescriptdelay

Issue arises when the value becomes nonexistent following the execution of a

Having an issue with my code where I have one class with a function in it, and another class that imports the first class to use that function. However, after the function is executed, I am not getting the expected value. First class: export class MoveE ...

javascriptangulartypescriptclassundefined

Order elements by their ratings in descending order using jQuery and then conceal divs according to their values

I am attempting to accomplish the following task. I have twelve divs structured like this: <div id=1><div>test 1</div><div>4</div></div> <div id=2><div>test2</div><div>1</div></div&g ...

javascriptjquerylogic

"Is there a way to extract a value from a JSON object using

I have an object with the following key-value pairs: { 'http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier': '918312asdasc812', 'http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name': 'Login1&a ...

javascriptjsontypescript

Add different input strings to an array within the scope when there is a change in the input value (AngularJS)

My goal is to populate an empty array within the scope with strings. The number of elements in this array can vary depending on what the user types in the player count input field. $scope.playerNames = []; To achieve this, I am using a $watch function th ...

javascripthtmlangularjsarraysinput

Having issues with a drop-down in Bootstrap. Is there anyone who can assist in getting it to function

I recently implemented a drop-down menu on the top navigation of my website. However, after applying Bootstrap to one of my pages, the drop-down menu stopped functioning properly. Below is the code that was applied: <link href="https://cdn.jsd ...

javascripthtmlcssbootstrap-5

Reading data from Firestore in Next.js

I came across a Next.js starter that retrieves data from Firestore v9, but it only displays the data after a click event. How can I modify this code in Next.js to automatically show the data without needing to click? import { db } from '@/lib/firebase ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js

Facing an issue with the format.js not functioning properly in Rails version 6.1.3

styles.css @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap"); body { font-family: 'Roboto', sans-serif; color: #333; } .wrapper { max-width: 960px; margin: 0 auto; } button { background ...

javascriptrubyajaxruby-on-rails-6

When clicking outside of tinyMCE, the textarea will be hidden

I am working with a tinyMCE textarea enclosed in a div named text_editor. In my jQuery code, I have the following: $('#text_editor').hover(function(){ mouse_is_inside=true; }, function(){ mouse_is_inside=false; }) ...

javascriptjquerytinymcetextarea

Locate all instances of words that begin with a certain character and are immediately followed by numbers within

I am searching for words that start with "mc" and are followed by digits only. let myString = "hi mc1001 hello mc1002 mc1003 mc1004 mc mca"; Expected output = [mc1001, mc1002, mc1003, mc1004] This is how I tackled it: const myRegEx = /(?:^|\s)mc(. ...

javascriptjquerynode.jsregex

Tips for organizing and nesting form data

Can I format my data in JSON like this: { attachments: { file: [ { name: 'pic1.jpg' }, { name: 'pic2.png' } ], username: 'Test', age: 1 } } Is it achievable us ...

javascriptmultipartform-dataform-data

Should a checkbox be added prior to the hyperlink?

html tags <ul class="navmore"> <li><a href="link-1">Link 1</a></li> <li><a href="link-2">Link 2</a></li> </ul> Jquery Implementation in the footer $(".navmore li a").each(function(){ v ...

javascriptjquery

Bringing in a variable from a component that is dynamically imported

I have a dynamically imported (Map) component on my page. const Map = dynamic(() => import('../components/Mapcomp'), { ssr: false, }) In addition to the component, I also need to import a variable from it. const [taskImg, setTaskImg] = useS ...

javascriptreactjsmodulenext.js

Guide to executing an efficient Graphql request in Vue using Apollo

Seeking assistance with configuring my initial queries on scaphold.io. Here is the query I am running through the internal GraphiQL: query AllPrograms { viewer { allPrograms{ edges { node { id name } ...

javascriptvue.jsgraphqlapollovue-apollo