The CSS code is functioning properly when implemented in a browser, but is not displaying correctly when added to the

When using the dev tools, we can easily apply

border-radius: 20px;

to

.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .one-container .site-content, .inside-page-header

We can see the changes immediately. However, when adding the same code to the additional CSS section in WordPress, it doesn't take effect.

@media {    
.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .one-container .site-content, .inside-page-header 
{
      border-radius: 20px;
}
}

View image description here

How can we debug this issue? How can we correctly apply the CSS to WordPress?

csswordpresscss-selectorsfrontend

Answer №1

Why have that @media without a continuation? Simply eliminate it if there is no need for specific specifications, and make sure the .css file is included on the page (also double-check this).

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

Warning: CSS Validation Notice - Identical color and background-color used in two different contexts

I have been receiving numerous warnings similar to the ones mentioned below during a CSS validation check via > 513 Similar color usage for both text and background in multiple areas such as #blue_module and #red_module_top, .content ul li and # ...

css

Tips for arranging HTML elements in a horizontal line, even if they belong to different parent elements

My HTML document features a sticky header and footer, with a div below the header that sticks to it to eventually hold tabs above a form. I've been struggling to align the form vertically below this div. The issue arises because the tab div lacks a sc ...

javascripthtmlcss

The words run out before the paper does. Keep reading for more details

While updating the CSS on my blog, I ran into an issue where the text in my posts is not extending all the way to the end. To see what I'm experiencing, check out this image- I really need the text to align properly and reach the full width of the p ...

htmlcssblogger

Steps for embedding a webpage within a div element

I am facing an issue while trying to load a web page within a div using an ajax call. Unfortunately, it's not working as expected and displaying the following error message: jquery.min.js:2 [Deprecation] Synchronous XMLHttpRequest on the main thread ...

javascripthtmljquerycssajax

Issue with Jquery checkbox calculator constantly displaying Not a Number (NaN)

I'm facing an issue with jQuery. The Custom Wpform Checkbox Field is returning NaN. HTML <div class="wpforms-payment-total"> $ 85 </div> <input type="checkbox" name="myBox2" size="1 ...

javascriptjquerynode.jswordpress

How can I use a CSS file in PHP to conceal the folder structure?

main.css $theme->assign('css_file',SITE_URL.'styles.php?theme='.THEME_ID); $theme->display(TEMPLATES_PATH.'header.tpl'); header.tpl <link rel="stylesheet" href="{$css_file}"> styles.php include TEMPLATES_PATH. ...

phpcss

Can someone explain to me how I can customize the background of a bootstrap container?

Currently, I am working on an EJS login project and I have created a style.css file with the following code: [theme="bloodRed"] { background-color: #ff2424; color: #e571e1; accent-color: #00ff00; } In my register.ejs ...

cssnode.jsexpressejsbootstrap-5

Rather than overwriting it, append a new value to the localstorage

I am trying to insert the value of newUsername into the localStorage setUsernamesArray. However, my current code overwrites the existing value instead of adding to it. Code $('#signUpButton').click(function() { var newUsername = $('#userna ...

javascriptjqueryhtmlcss

How to completely color a div in CSS

<h:head> <title>Unique Title</title> <style> .top{ margin: 0; padding: 0; background-color: blue; height: 15px; width: max-content; } </style ...

htmlcss

Ways to align the contents of a div in the center

Looking at the content in this div, it seems that the top is positioned higher than the bottom. Can anyone provide some guidance on how to fix this? .dtestContactDet{ border-bottom:1px solid #D7D7DE; border-bottom:1px solid #D7D7DE ; -khtml-border-bo ...

css

After running my CSS through the validator at http://www.css-validator.org/validator, I encountered a Parse Error. Any suggestions on how I can resolve this issue?

Here are the CSS codes for my media query section. @media (min-width:320px) and (max-width:575px){ .chakra{ width: 100%; float: unset; margin: auto; } } ...

css

Tips for positioning the Google Custom Search bar

I am looking to position the Google custom search box on the left side of my website. Currently, I am using a website builder called imxprs and have implemented this code for my custom search box. <script> (function() { var cx = '013012 ...

javascripthtmlcssuisearchbargoogle-custom-search

Position form elements flush with div containers

.quantity-button { height: 35px; width: 35px; padding-bottom: 1px; margin-bottom: 3px; font-weight: 600; font-family: Raleway; color: white; background-color: #AA95B9; border: 2px solid black; border-radius: 5px; cursor: pointer; display: -webkit-flex; dis ...

htmlcssformslayout

Scroll issue causing CSS not to be applied to a field within a div

Can someone help me with this issue I'm facing in my jsfiddle example? Here is the link: http://jsfiddle.net/AnnaMiroshnichenko/xjyb8/1/. The problem is, when I scroll the div, the field underneath the scroll does not appear to be applying CSS rules p ...

csshtmlsafariscrollmobile-safari

How can I remove a specific JSON object from localStorage based on the data associated with the element that is currently being clicked on?

Unique Scenario A user interacts with an element, triggering a change in the background image and storing data related to that element in localStorage: this process functions correctly. Next, the toggle variable is set to 0, the background image change ...

javascriptjqueryhtmlcsslocal-storage

Learn the position of a div element that appears following the lazy loading of images

I am struggling to make a div sticky below a set of lazy load images. The issue lies in the fact that the offset of the div keeps changing due to the lazy loading images pushing it down. There are 4 images with unknown heights, making it difficult to acc ...

javascriptjqueryhtmlcss

The child elements will take up the entire space within the parent element

I need to display N child divs with varying widths inside a parent div of unknown width. I want the child divs to fill and align side by side in the parent div, similar to a td - tr relationship. Can you help me achieve this layout? ...

htmlcss

Is there a more efficient approach to applying a basic function to multiple elements within a DIV and having it activate only upon a click event using jQuery?

This solution works, but I am looking for a more professional approach in order to adhere to the principle of "don't repeat yourself." $("document").ready(function(){ $(".child").each(function(index){ $(this).click(func ...

htmljquerycsscss-selectors

Angular directive for D3 chart not displaying on the page

While working on a D3-based angular directive inspired by this code pen Here is my implementation. Check out the Codepen link angular.module('myApp', []). directive('barsChart', function ($parse) { var directiveD ...

javascriptcssangularjsd3.jsangularjs-directive

Instructions on inputting a keyword in the search bar and clicking the search icon on the YouTube homepage with Selenium Python

My specific task involves inputting a search term on "youtube.com" and examining the results that appear. While I can successfully click on the search bar and enter the keyword, I encounter an issue when trying to click on the "search" button. Here is my c ...

pythonseleniumyoutubecss-selectorswebdriverwait