Cannot override @media query in CSS on Wordpress site

In an attempt to customize my site's layout, I experimented with overriding the @media query using child CSS and the customization CSS function within the WP interface.

Below, I've included a snippet of code that I discovered in the parent CSS file:

@media only screen and (max-width: 1280px){
.content-both-sidebars .content-area{float:none !important;width:100% !important;left:auto !important;border-width:0 !important}
.content-both-sidebars:not(.separate-layout) .content-area{padding:0 !important;margin-bottom:40px}
.content-both-sidebars .widget-area.sidebar-primary,.content-both-sidebars .widget-area.sidebar-secondary{float:left;width:49% !important; left:auto !important; padding:0 !important}
.content-both-sidebars .widget-area.sidebar-primary{float:right}
.content-both-sidebars:not(.separate-layout) .widget-area.sidebar-primary,.content-both-sidebars:not(.separate-layout) .widget-area.sidebar-secondary{width:48% !important}
.separate-layout.content-both-sidebars .content-area{margin-bottom:20px}
.separate-layout.content-both-sidebars .widget-area.sidebar-primary,.separate-layout.content-both-sidebars .widget-area.sidebar-secondary{width:49% !important}
.separate-layout.content-both-sidebars .widget-area.sidebar-secondary{margin-bottom:20px}
.separate-layout.content-both-sidebars .widget-area.sidebar-primary{padding-left:0}
}

@media only screen and (max-width: 1080px){
.content-both-sidebars .content-area{float:none !important;width:100% !important;left:auto !important;border-width:0 !important}
.content-both-sidebars:not(.separate-layout) .content-area{padding:0 !important;margin-bottom:40px}
.content-both-sidebars .widget-area.sidebar-primary,.content-both-sidebars .widget-area.sidebar-secondary{float:left;width:49% !important; left:auto !important; padding:0 !important}
.content-both-sidebars .widget-area.sidebar-primary{float:right}
.content-both-sidebars:not(.separate-layout) .widget-area.sidebar-primary,.content-both-sidebars:not(.separate-layout) .widget-area.sidebar-secondary{width:48% !important}
.separate-layout.content-both-sidebars .content-area{margin-bottom:20px}
.separate-layout.content-both-sidebars .widget-area.sidebar-primary,.separate-layout.content-both-sidebars .widget-area.sidebar-secondary{width:49% !important}
.separate-layout.content-both-sidebars .widget-area.sidebar-secondary{margin-bottom:20px}
.separate-layout.content-both-sidebars .widget-area.sidebar-primary{padding-left:0}
}

My objective is to override the first @media query (max-width: 1280px) and have the second one take precedence. Although I managed to achieve this by editing the parent CSS file directly, I am having difficulty replicating the same result when working with a child theme or utilizing the CSS customization feature in the WP interface.

Any assistance would be greatly appreciated! Please advise.

csswordpress

Answer №1

Check out this alternative

@media all and (max-width: 1280px){
.content-both-sidebars .content-area{float:none !important;width:100% !important;left:auto !important;border-width:0 !important}
.content-both-sidebars:not(.separate-layout) .content-area{padding:0 !important;margin-bottom:40px}
.content-both-sidebars .widget-area.sidebar-primary,.content-both-sidebars .widget-area.sidebar-secondary{float:left;width:49% !important; left:auto !important; padding:0 !important}
.content-both-sidebars .widget-area.sidebar-primary{float:right}
.content-both-sidebars:not(.separate-layout) .widget-area.sidebar-primary,.content-both-sidebars:not(.separate-layout) .widget-area.sidebar-secondary{width:48% !important}
.separate-layout.content-both-sidebars .content-area{margin-bottom:20px}
.separate-layout.content-both-sidebars .widget-area.sidebar-primary,.separate-layout.content-both-sidebars .widget-area.sidebar-secondary{width:49% !important}
.separate-layout.content-both-sidebars .widget-area.sidebar-secondary{margin-bottom:20px}
.separate-layout.content-both-sidebars .widget-area.sidebar-primary{padding-left:0}
}

@media all and (max-width: 1080px){
.content-both-sidebars .content-area{float:none !important;width:100% !important;left:auto !important;border-width:0 !important}
.content-both-sidebars:not(.separate-layout) .content-area{padding:0 !important;margin-bottom:40px}
.content-both-sidebars .widget-area.sidebar-primary,.content-both-sidebars .widget-area.sidebar-secondary{float:left;width:49% !important; left:auto !important; padding:0 !important}
.content-both-sidebars .widget-area.sidebar-primary{float:right}
.content-both-sidebars:not(.separate-layout) .widget-area.sidebar-primary,.content-both-sidebars:not(.separate-layout) .widget-area.sidebar-secondary{width:48% !important}
.separate-layout.content-both-sidebars .content-area{margin-bottom:20px}
.separate-layout.content-both-sidebars .widget-area.sidebar-primary,.separate-layout.content-both-sidebars .widget-area.sidebar-secondary{width:49% !important}
.separate-layout.content-both-sidebars .widget-area.sidebar-secondary{margin-bottom:20px}
.separate-layout.content-both-sidebars .widget-area.sidebar-primary{padding-left:0}
}

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

What are some creative ways to customize radio buttons using images?

I am looking to customize the appearance of my radio buttons by using images for both selected and unselected states. Here is the CSS code I have implemented: input[type="radio"] { background: url("https://example.com/path/to/unselec ...

jquerycssradio-button

Having issues with ToggleClass and RemoveClass functionalities not functioning properly

As a novice in Jquery and CSS/scss, I've managed to create dynamic bootstrap cards for recording players. Each card consists of a music-container with control-play and vinyl elements. I aim to have multiple bootstrap cards generated based on the data ...

javascriptjqueryhtmlcssjquery-ui

What is the best way to implement iscroll4 in an iPad2 using CSS?

<html> <head> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/iscroll.js"></script> <script type="text/javascript" src="js/jquery-ui.min.js"></script> ...

cssipadiscroll4

Unable to duplicate content from Owl carousel items

Currently utilizing the owl carousel on my website to showcase carousel content featuring coupon codes. The problem I am facing is that I am unable to copy these coupon codes from the website. Here is the carousel code snippet: <div id="TopAirLine" cl ...

jqueryhtmlcssowl-carousel

Create a full-screen layout with a Bootstrap 5 column grid and a sleek navbar

Can you help me modify this design using Bootstrap rules while keeping the original CSS files intact? I need to make these 5 cards (columns) full width with a navbar. Issue 1: I always see a vertical scroll bar on desktop. Issue 2: The Navbar doesn' ...

csstwitter-bootstrapresponsive-designbootstrap-5fullscreen

Efficient guide to unlock the secrets of JS height measurements

I've noticed that there are several different 'Height' related properties in JavaScript such as clientHeight, Window.height, scrollHeight, offsetHeight, and more. Although I have a general idea of what they do, I am seeking a formal and det ...

javascripthtmlcss

Image that adjusts its size according to the device screen width while

My goal is to create responsive images with a fixed height. Below is the HTML code I am using: <div class="col-md-6"> <div class="img"> <img src="http://image.noelshack.com/fichiers/2016/16/1461065658-b-v-s.jpg"> </div&g ...

htmlcss

Is your Facebook send button appearing strangely? Find out how to fix it here!

I recently integrated the Facebook send button on my website, allowing users to easily share information about each drive listed. However, a new issue has arisen where clicking on the send button opens a popup inside a table, negatively affecting the page& ...

phpjqueryhtmlcssfacebook

Is there a way to implement this toolbar in Ionic Angular?

https://i.sstatic.net/sGd1o.png I am looking to replicate the toolbar shown in the image above using Ionic. As a beginner in Ionic development, I am finding it challenging to translate the design into code. I attempted to use a grid layout, but the varyin ...

javahtmlcssionic-frameworkionic4

Is there a method to style the parent DIV using CSS when the IDs of the child DIVs are

Similar Question: Looking for a CSS parent selector? If I am unable to modify the HTML file, is it possible to apply CSS styles to the parent DIV using only the ID of the direct child DIV? Here's an example scenario: <div> <div id="c ...

htmlcssdomcss-selectors

javax.el.MethodNotFoundException: JSP method cannot be located

While compiling the JSP template, I encountered the following exception: The method getFriendImage() is not recognized I attempted to rebuild the class without success. The src attribute contains a valid link to an image that is functioning properly. ...

javahtmlcssjsp

Is there a way to create a div element that allows both scrolling and dragging of the inner content?

I'm having trouble with a game board on my webpage. The board is 20x20 squares, but the container can only fit 10x10. I want to make the game board draggable so that the user can move it within the limits of the container. I tried using jQuery UI&apos ...

jquerycssdraggablescrollable

Is there a way to position the table to the right of the registration text boxes?

https://i.sstatic.net/Fh9Bk.jpg Is it possible to position the table using <div> elements? ...

htmlcssformshtml-tablealignment

Utilizing pseudo elements (after) in CSS with the font family in Font Awesome 6 fails to function properly

I am attempting to create the div using CSS after pseudo-element and I have included the Unicode in the content with the font family being "Font Awesome 6 Free". However, nothing is showing up and I'm not sure why. Can someone please assist me? Here i ...

htmlcssfont-awesome

Change the chosen item to uppercase within a dropdown menu using pure vanilla JavaScript

I am trying to achieve a specific effect where the text is uppercase only on the selected option within a <select> element. I came across a solution using jQuery in this article, but I need to convert it to plain JavaScript (vanilla JS). I have made ...

javascriptcss

Avoid applying the active class to specific elements while scrolling

I encountered the following issue: While trying to add logic to apply the active class on list elements in my navigation bar as I scroll, I utilized this code snippet: $(window).bind('scroll', function () { var scrollPos = $(window).scrollTop ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to center the circle and arrow within the border using CSS?

When the "hit" button is clicked, the arrow should move to touch the circle and change the color of the circle. My goal is to position the circle on the left side and center, with the arrow on the right side and center. section { border: 3px solid bl ...

htmlcss

Error message: Unable to find child element in Selenium WebDriver

I'm currently dealing with a registration page where I encountered an issue. During my testing phase, I attempted to register without inputting a first name. Upon clicking the register button, I expected to see a 'Required' notification la ...

cssseleniumselenium-webdriverxpathdescendant

Achieve dynamic styling and adjust window size using window.open

My mind is exhausted after days of trying: function prtDiv( o ) { var css = 'body {font:normal 10px Arial;}' ; var wo = window.open('','print','width=600,height=600,resizable=yes'); wo.document.write( '<he ...

javascriptcsswindow.openscalable

Are you searching for a stylish tabbed navigation menu design?

I am searching for a tabbed navigation menu specifically designed to showcase images as the tab items. Here is an example of what I have in mind: <div class="menu"> <a href="#"> <img src="images/Chrysanth ...

jquery-uicss