"Media queries in CSS don't consistently apply all styles when reaching the minimum

The CSS styles I am using are as follows:

@media (min-width: 1280px)
{
    .window-padding {
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (min-width: 769px)

{
    .window-padding {
        padding-right: 20px;
        padding-left: 20px;
        padding-left: 10px;
        padding-right: 10px;
    }
}

.window-padding {
    padding-right: 10px;
    padding-left: 10px;
    padding-left: 0px;
    padding-right: 0px;
}

However, when viewing in a browser with a width greater than 1280px, only the padding-top and padding-bottom from min-width:1280px is being applied. The padding-left and padding-right seem to be from a style that does not have a @media condition. Here is what is currently being applied:

https://i.sstatic.net/vK9zS.png

EDIT: I discovered that reordering the CSS to have the smallest size first resolved the issue. Additionally, I realized that there were duplicate padding styles present due to a mistake.

htmlcssmedia-queries

Answer №1

It is recommended to always place your @media styles below your main CSS files as this will make it easier to override existing styles.

.window-padding {
    padding-right: 10px;
    padding-left: 10px;
    padding-left: 0px;
    padding-right: 0px;
}
@media (min-width: 1280px)
{
    .window-padding {
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (min-width: 769px) and (max-width: 1279px)
{
    .window-padding {
        padding-right: 20px;
        padding-left: 20px;
        padding-left: 10px;
        padding-right: 10px;
    }
}

Answer №2

organize your CSS & include Max-width

 .window-padding {
        padding-right: 50px;
        padding-left: 50px;
    }


    @media (min-width: 1280px) {
        .window-padding {
            padding-top: 20px;
            padding-bottom: 20px;
            padding-left: 30px;
            padding-right: 30px;
        }
    }
    @media (min-width: 769px) and (max-width: 1279px)  {
        .window-padding {
            padding-right: 20px;
            padding-left: 20px;
        }
    }

Answer №3

Begin by selecting the default style, then adjust the screen resolution accordingly. For minimum width, follow this sequence: default > 768 > 1280 (applies to min-width). If you opt for max-width, the order would be Default > 1280 > 768.

To set styles for minimum width:

.class {
  your style
}
@media screen (min-width: 768) {
  override default
}
@media screen (min-width: 1280) {
  override 768
} and so forth

To set styles for maximum width:

.class {
  your style
}
@media screen (max-width: 1280) {
  override default
}
@media screen (min-width: 768) {
  override 1280
} and so on

Answer №4

Can someone shed light on the cause of this issue?

It is advisable for crucial CSS styles to be placed at a lower priority level.

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

Modifying alignment of buttons in React components

Transforming the typical Tic Tac Toe game from the React tutorial, with an added one-player feature. Oddly, button alignment shifts out of place once a value is inserted; causing the button to drop by about 50px until the row is filled with values, after ...

javascriptcssreactjs

Motion of the atoms

I recently came across an interesting effect on the IconArchive website, but I am unsure how to implement it. If anyone could help me understand the concept with a small example, that would be greatly appreciated. You can see the effect in action by visi ...

javascriptjqueryhtmlcss

How can I extract text from HTML tags that contain nested HTML using C#?

<Item> </c>Text i need</c> </c>Text i need</c> </c>Text i need</c> </Item>Text i need</Item> </Item>Text i need</Item> </Item>Text i need</Item> </Item> i need to extract ...

c#htmltexttags

Ensure that the mask implemented in the form input only shows two decimal places, while simultaneously retaining the original value

Is there a way to format a number in a form input so that it displays only two decimals while still retaining the original value? This is necessary to avoid incorrect values down the line and meets the customer's requirement of showing no more than tw ...

jqueryhtmlcssformsinput

Create a login <div> that appears to float effortlessly on the screen

Seeking assistance in creating a login div similar to the one on ups.com. Upon clicking the login button on www.ups.com, a floating login div appears. How can I generate a similar div? Any help would be greatly appreciated. Thank you. ...

htmlcss

Checkbox value not being accurately retrieved by Struts2 page

I have a form that captures phone information for two different phones, with each phone having its own set of details. If the user enters the same phone number for both phones, the second checkbox is automatically checked using the JavaScript code below: ...

javascripthtmlstruts2

Execute function upon changing the title of a list item using jQuery

Hey there, I've got a question for you. Is it possible to trigger an event when the title of a list element is changed? For example: <ul> <li id="li_1" title="40">40</li> </ul> So when the title attribute changes (coming ...

htmljquery

Font size transition on pseudo elements is not functioning properly in Internet Explorer when using the "em" unit

When I hover over, the font awesome icon and text on this transition increase in size. All browsers work well with this effect except for IE 11. This example demonstrates the same transition using px (class test1) and em (class test2). While using px wor ...

cssinternet-explorerinternet-explorer-11

Image Positioned Outside Border in HTML

I'm working on creating a personalized homepage for my browser and I want to display 3 images with captions evenly spaced within a divider. Although everything seems to be in place, the border of the outermost divider is not covering the images. How c ...

htmlcssborder

Modify the hover color of the FontAwesome span icon

Here's a span that I have: <span class="fa fa-green fa-arrow-circle-o-right" aria-hidden="true"></span> I decided to change the color to #008d4c like this: .fa-green { color: #008d4c; } But when I try to hover over it, the color do ...

cssfont-awesome

Unable to eliminate top padding without using universal selector

Trying to remove the top padding on a webpage, but encountering some difficulty. Here's the HTML code: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title&g ...

htmlcssmarginpadding

Optimizing CSS for printing by eliminating unnecessary white space with media queries

Appreciate your assistance! I'm currently working on a solution to print a specific div using CSS Media queries. When the user clicks on print, I want to hide all other elements except for the body div they chose. However, I'm facing an issue whe ...

javascripthtmlcssprintingmedia-queries

If the width is below 767, the previous code will not be effective in jQuery

Challenge: How can I ensure that the code within the if statement only executes when the screen width exceeds 767px, and does not work if it is less than 767px? Using jQuery: $(document).ready(function() { $(window).resize(function() { if ($( ...

javascriptjquerycss

Issues with Bootstrap Table Column Widths not Adjusting Properly

I am facing an issue with my Bootstrap 4 table where the fixed column widths specified in the header row are not being respected when the table is rendered. The Time column, for example, should only be 5% of the width but it is taking up more space than ex ...

javascripthtmlcssbootstrap-4

Attempting to create a discord bot using Selenium in Python for seamless integration

I am currently attempting to create a Discord bot using Selenium in Python. I have been working on the script to connect the bot to my discord account. Below are the required imports: from selenium import webdriver from selenium.webdriver.common.keys imp ...

pythonhtmlseleniumweb-scrapingbots

Creating a Curved Border with Clip Path in CSS

Hey there! I'm currently attempting to add a speech bubble at the bottom left using clip-path, but I'm struggling to adjust the pixels just right to achieve the clear and exact look I want. Can someone provide suggestions on how to accomplish thi ...

javascripthtmlcss

Prevent the navigation bar text from being truncated

The below code snippet: <div data-role="navbar"> <ul> <li><a href="#page_1" data-transition="none">Heading 1</a></li> <li><a href="#page_2" class="ui-btn-active ui-state-persist">Heading 2</a& ...

cssjquery-mobile

Why do certain full screen websites not align with my screen width properly?

When I use my 1920px wide screen and inspect the HTML tag with Chrome DevTools on websites like Firebase or Facebook Messenger, I notice a difference: https://i.sstatic.net/1nknq.png Despite my screen width being 1920px, these websites appear fullscreen ...

htmlcsswidth

Concealing subcategories within a responsive menu using jQuery

My website's responsive menu changes based on screen resolution, but I encountered an issue. On mobile viewports, the sub items in the menu are displayed by default. I want them to only appear when the parent item is clicked. Currently, clicking the p ...

jqueryhtmlcssresponsive-designsubmenu

Tips for adding a space before the footer in a document

Implementing a Top Navigation Bar with grey spacing Avoid having any extra space just before the footer: Organizing my Layout File ("navigation_top" refers to the black navigation bar at the top) %body = render "navigation_top" .main-content .cont ...

cssruby-on-railshaml