I am attempting to create the following CSS code:
.myClass
{
@media all (max-width: 1024px) {
left: 33%;
}
@media all (min-width:1025px) {
left: 25%;
}
}
Unfortunately, it doesn't seem to be working as expected. Is there a different approach I could take?
EDIT: I am aware that placing the media queries outside of the class is a solution, but I would like to avoid doing that =(
It seems you may be encountering an issue by attempting to include media queries within a class definition.
For proper implementation, ensure that your media queries are placed outside of any specific class declaration. Within the queries themselves, you can then override the styles of the classes as needed for different screen views.
To deepen your understanding of
media-queries, reference the documentation available at this link
.myClass
{
// default style
}
@media all (max-width: 1024px)
{
.myClass {
left: 33%;
}
}
@media all (min-width:1025px) {
.myClass {
left: 25%;
}
}
The issue at hand revolves around the structure of CSS statements. CSS consists of two main types of statements:
@media falls under the category of at-rules. While CSS rules can be nested within @media, nesting $media or any other at-rule inside a CSS rule is not syntactically correct, resulting in the ignored behavior.
For more information, refer to:
Perhaps you should consider using the following CSS media queries:
@media all and (max-width: 1024px) {
.myClass {
left: 33%;
}
}
@media all and (min-width: 1025px) {
.myClass {
left: 25%;
}
}
The code above shows an example of invalid syntax in CSS. To make it correct, you should write it like this:
@media all and (max-width: 1024px) {
.myClass{
left: 33%;
}
}
@media all and (min-width: 1025px) {
.myClass{
left: 25%;
}
}
Could you attempt using the following code snippets:
@media (max-width: 960px) {
.myClass {
left: 40%;
}
}
@media (min-width: 961px) {
.myClass {
left: 30%;
}
}
This thread may be old, but it seems that in the year 2024, you can now nest media queries inside CSS classes without the need for SASS.
For an example of this new approach, check out:
I'm currently investigating which browsers have integrated support for this feature.
Cheers!
After researching various solutions on Stack Overflow, I attempted to set fixed dimensions for the pseudo element (height: X px; width: X px;), but this is not an ideal solution for me as I require a scalable and responsive image that fits its parent eleme ...
On my website, I have input fields where I've added the following CSS styling: .ellip { white-space: nowrap; width: 200px; overflow: hidden; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; text-overflow: ellipsis; } H ...
Utilizing twitter-bootstrap for styling, I have implemented a login form and am attempting to center it on the page. Most suggestions on stackoverflow advise placing elements inside the container class, which is what I have done. The requirement is for t ...
My goal is to create a PhoneGap app with a main menu featuring a title and three buttons. Here is the layout: <body> <div class="app"> <div class="headerOne"> <h1></h1> </d ...
I've been working on filtering and searching the table below based on the href value. My code successfully filters the displayed columns in the table, but it fails to work when I search for a string within the href attribute. For instance, if I searc ...
I'm struggling with creating a custom slider and am having trouble placing the navigation buttons on the sides. You can view the current layout on JSfiddle: http://jsfiddle.net/zfxrxzLg/1/ Currently, the navigation buttons are located underneath the ...
Click here for the interactive demo. I'm trying to create a draggable effect for the cover element within the pic-area, but I only want it to be draggable until it completely fills the space without any white gaps. Please have a look at the example b ...
When working with a <table> element, I encountered the need to search for its descendants and direct descendants while avoiding wading through nested tables. The elements I seek lack reasonable IDs, so specific selectors are essential: <html> ...
[EXPLANATION] (apologies for the length) In my gridview, users have the option to add a new entry or edit an existing one. When they click on either 'Add' or 'Edit', a popup window appears for them to input the information for the new ...
I'm using PHP to retrieve data from my database and then leveraging Javascript to enable users to add it. However, I am facing challenges in making a div change its background color and apply borders. <div class="displayedItems"></div> &l ...
Just trying to make sure the title is clear, as this happens to be my initial post in this space. Lately, I've been venturing back into the creation of websites and currently looking to incorporate a "concert log" below a set of GIFs on my website&apo ...
On my webpage, I have two select option buttons placed on different tabs. Whenever one button is changed, I want to update the value of the other button and assign it to a specific element like a span in the example code provided. While everything works sm ...
I am currently working with a basic layout on my webpage <div id="content-wrap"> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div ...
Can you please assist me? I would like to modify the CSS markup below in order to remove the 1 pixel added extra on the active clicked tab from my UL LI Tabbed Menu. How can this be achieved? Here is a picture of the issue: HTML Markup: <div class=" ...
I've been searching for a solution to this problem, but all I seem to find online is advice on how to "replace button text." What I'm trying to achieve is to have text change into a button when hovered over. I've attempted using fadeIn/fade ...
I am working on a basic navigation bar that includes a hover effect. .navip { float: left; text-decoration: none; font-weight: lighter; } .navip > a { display: block; color: black; text-decoration: none; font-size: 20px; ...
It seems like a basic mistake on my part, but I just can't seem to make it work. What I'm trying to achieve is that when you hover over a specific item in the menu, the text within that item should increase in size. However, currently it only en ...
Struggling with aligning two smaller divs within a main wrapper for my website. Despite confining them to the main div, they don't stay fixed or aligned properly. How can this issue persist even when contained within a main div? I've attempted s ...
I'm struggling to prevent my HTML element from pushing down my other elements. When I look at the header, you can see that the BitBay title is causing alignment issues with the search bar and the account button. Even after trying to use the text-alig ...
This is what the alert and close button should look like on my website, based on Bootstrap's design. However, after implementing it into my site, it ended up looking like this. I attempted to modify the bootstrap.min.css file, but the changes did not ...