Issues with styled-components media queries not functioning as expected

While working on my React project with styled components, I have encountered an issue where media queries are not being applied. Interestingly, the snippet below works perfectly when using regular CSS:

import styled from 'styled-components';

export const Block = styled.div `
    margin: 20px;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-self: center;
    background-color: #DAD870;
    flex: 1;
    min-width: 200px;
    height: auto;
    transition-duration: 1s;
    font-family: sans-serif;

    &:hover {
        transform: scale(1.1);
    }

    @media (max-width: 1024px) {
        width: 42%;
        min-width: 158px;
    }

    @media (max-width: 480px) {
        width: 40%;
        min-width: 148px;
    }
`;
javascriptcssreactjsfrontendstyled-components

Answer №1

I don't typically use react, but it seems like you're attempting to utilize @media within an element. This approach may not work as expected. Instead, consider structuring your CSS like this:

div{
   min-width: 200px;
}

@media (max-width: 1024px) {
   div{
     width: 42%;
     min-width: 158px;
   }
}

@media (max-width: 480px) {
   div{
     width: 40%;
     min-width: 148px;
   }
}

Although I'm not sure how to present it exactly as you did, the key is to define your media queries separately. I hope this explanation proves helpful.

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

The AngularJS API now includes the ability to store both the new and old values when saving

My goal is to enhance functionality by capturing both the old value and new value from the client side and saving them in separate tables using my API. For example, if a user changes their FirstName from 'aaa' to 'ccc' and their LastNa ...

javascriptc#jqueryangularjs

When arriving on a page via an HTML anchor tag, the CSS style does not appear. How can I "reinstate" it?

I have set up a website with an index.html page that links to a contact.html page using anchor tags. On the contact.html page, there are anchor tags that should navigate the user back to specific sections of the index.html page. The navigation works fine, ...

javascripthtmlcssanchor

Unable to apply a border to the button

I'm having trouble adding a border to my button on the website. I've tried setting the color, which works fine for the font color within the button, but the border properties are not working. Despite trying some highly rated solutions, none of th ...

css

Issue with NPM Scripts Post Hook Triggering

Currently, I am exploring the use of npm scripts to gradually phase out my dependency on Gulp. To begin, I have created a single custom script called watch. This script will eventually execute all other scripts prefixed with the name watch, such as watch:s ...

javascriptnode.jsnpmpostcssnpm-scripts

Having difficulty accessing information from the parent scope

As I continue to dive into AngularJS, I've encountered some challenges with scopes in my current project. Here is my controller and directive setup: angular.module('myModule', []) .controller('myController', ['$scope', ...

javascriptangularjs

An issue occurred during compilation with 1 error: The required dependency could not be located

Encountering an issue in a Vue component while attempting to import another JavaScript file located in the services/AuthenticationService directory. Error message: Module not found: Error: Can't resolve '@/services/AuthenticationService'. ...

javascriptvue.jswebpack-dev-server

Is there a way to send an array of objects as parameters in JavaScript?

I have an array of objects with the same key name. My goal is to pass each address key inside those objects as a parameter to my API. How can I achieve this? The response I receive looks something like this: { '0': { address: 'abcd' }, ...

javascriptnode.js

Node.js Email Registration Confirmation Process

Creating an app using nextJS has been a great experience for me. I have successfully implemented functionality that requires users to register by entering their username (email address) and password on the registration page. Upon submission, this data is ...

node.jsreactjsemailnext.jsregistration

When I hover over my images, they begin to flash before my eyes

My layout is set up so that when I hover over the printer image, it should switch to another image. However, instead of smoothly transitioning, the image starts to flash. This issue occurs in all browsers, indicating that I have made a mistake somewhere. ...

htmlcss

Using React to pass a value through state when handling changes

Trying to implement handleChange and handleSubmit methods for a login page in React. Set username and password values in state, update them when form inputs change, then submit using the updated values. However, values print as undefined in the console. N ...

javascriptreactjsreact-nativereact-routerreactive-programming

react-simple-typewriter: Issue with loop functionality

I tried using the react-simple-typewriter codes from this Link in my code but did not achieve the desired output. It only works for the first word in the list, however, I want it to continuously run and display the next word on reload. I attempted changing ...

reactjsloops

What causes the off-canvas menu to displace my fixed div when it is opened?

Using the Pushy off-canvas menu from GitHub for my website has been great, but it's causing some trouble with my fixed header. When I scroll down the page, the header sticks perfectly to the top, but once I open the off-canvas menu, the header disappe ...

javascriptjquerycssoff-canvas-menu

Utilize pg-promise for inserting data with customized formatting using the placeholders :name and :

After reviewing the pg-promise documentation, I came across this code snippet: const obj = { one: 1, two: 2 }; db.query('INSERT INTO table(${this:name}) VALUES(${this:csv})', obj); //=> INSERT INTO table("one"," ...

javascriptnode.jspg-promise

Ways to resolve a blank outcome in the $scope selection choices list?

Currently, I am utilizing AngularJS to create a select dropdown field populated with options from an array. The end user has the ability to add options via an input box. While the $scope successfully adds to the array, the dropdown select box displays "und ...

javascriptarraysangularjs

Adding a class to a different UL tab from the tab div in jQuery tabs - a guide

Looking to implement a tabs navigation using jQuery without the jQuery Tabs UI. Essentially, when a user clicks on a list item, the script selects the list element with data-tab="X" and adds the class current, making the link visible (default op ...

javascripthtmljquerycsstabs

Incorporate a class into the fixed navigation menu using fullpage.js

I am attempting to modify the behavior of a sticky menu as the user scrolls down using fullpage.js. My goal is to have the #top-wrapper behave normally when the first section/page loads, and then add a class of is-fixed as you scroll down. When scrolling ...

javascriptjqueryhtmlcssfullpage.js

Reversing Changes to the Database in Node.js using Mongoose on Error

In my node.js server, I have a complex express route that interacts with the database using mongoose, making multiple modifications. I'm looking to introduce a mechanism that can revert all changes in case of any error. My initial thought was to incl ...

javascriptnode.jsexpressmongoosetry-catch

Saving data inputted in a form using ReactJS and JavaScript for exporting later

What is the best way to save or export form input in a ReactJS/JS powered website? For example, if I have a form and want to save or export the data in a format like CSV after the user clicks Submit, what method should I use? Appreciate any advice. Thank ...

javascriptreactjs

Javascript behavior during execution can vary from what is observed during debugging

I'm currently facing an issue while trying to debug a script. Everything seems to work fine in debug mode, but not during runtime. Here's the JavaScript function causing trouble: function Add() { ... $('#Value').val($('#V ...

javascriptjqueryasp.net-mvc

Issue with Next.js: Content does not load when back button is clicked

Query: Found in React + Next.js application When navigating from http://localhost:3000 to http://localhost:3000/p/hello using Link. Refreshing the page. Clicking the back button leads to http://localhost:3000, but still displays the content of http://loc ...

reactjsnext.js