Apply specific margins to every second element in media queries using the margins that were previously set for every third element

Looking to adjust the margin for every second element instead of every third when using media queries.

.title:nth-child(3n+3) {margin-right:0 !important}

@media screen and (max-width:1160px) and (min-width:900px){
.title:nth-child(2n+2) {margin-right:0 !important}
}

The CSS in the lower part does not seem to be overwriting the settings in the upper part. It changes the margin for the second element but retains the margin settings for the third element as defined previously in the CSS file.

Answer №1

To modify the rule for every third element, you can encapsulate it within its own media query or override it as shown below:

.title:nth-child(3n+3) {margin-right:0}

@media screen and (max-width:1160px) and (min-width:900px){
  .title:nth-child(3n+3) {margin-right: 20px;}
  .title:nth-child(2n+2) {margin-right:0 }
}

jsFiddle: https://jsfiddle.net/9woaL5ho/

Check out the demonstration: https://i.sstatic.net/Oxrgs.gif

Please replace the value of 20px with the original one, rather than using inherit which will result in a margin of 0. Also, try to avoid relying on !important.

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

Changing the text color and background color of a span element when a ng-click event is triggered

There are two buttons, Today and Tomorrow, each with an ng-click function. By default, the button background color is white and text color is red. When the Today button is clicked, the background color changes to blue and the text color changes to white. ...

Tips for creating a sidebar table of contents with CSS

I'm looking to design a webpage with a side bar table of contents (TOC) similar to the one found here: The current placement of the TOC on the HTML page is as follows: <h2>Table of Contents</h2> <div id="text-table-of-contents&quo ...

"Mastering the art of underlining individual components in React with the power of

Hey there, I'm having some issues working with the CSS for my component. I've created a joke component that has joke and punchline props. The issue is that when it appears in the compiler, my joke component (which I call twice) only shows up as t ...

What is the process for customizing styles within the administrative area of a Wordpress website, such as modifying the shade of the admin toolbar?

Can someone provide guidance on changing the color of a specific dashicon in the WordPress admin toolbar? I've tried adjusting the color using the browser inspector, but I can't seem to get it to work when I add the code to my stylesheet. #admin ...

Can you modify the color of the dots within the letters "i"?

Is there a method to generate text like the one shown in the image using only css/html (or any other technique)? The dots in any "i's" should have a distinct color. Ideally, I'd like this to be inserted via a Wordpress WYSIWYG editor (since the ...

Closing the Bootstrap 5 Navbar on Click Event

I'm not very familiar with Bootstrap and I came across this code online that involves javascript in html, which I don't fully understand. I want to make the hamburger menu close automatically after selecting an item in the navigation bar, especia ...

Why is it that using div with a 100% width doesn't behave as one would anticipate?

Learning CSS has been an interesting journey so far. It's not always as intuitive as one might think, especially in web development. :) I recently attempted to create a simple, static progress bar using the following HTML file: <html> <he ...

CSS Flexibility in Action

Presently, my tab bar has a fixed look as shown here: https://codepen.io/cdemez/pen/WNrQpWp Including properties like width: 400px; etc... Upon inspecting the code, you'll notice that all the dimensions are static :-( Consequently, I am encountering ...

I have noticed that the baseline of a Span element has shifted after updating my Chrome browser to a version that begins with

Once I updated to chrome Version 108.0.5359.94 (Official Build) (64-bit) from 107.0.5304.87 (Official Build) (64-bit), the behavior of the span element changed drastically. It shifted its baseline when multiple spans were stacked on top of each other. Exp ...

Issue with overlapping sticky dropdown and sticky navigation in Bootstrap 4

My issue revolves around getting the dropdown button menu to display in front of the vertical menu. When I click on the dropdown, the vertical (blue) menu takes precedence. This problem arose suddenly after applying the sticky-top class to both menus. Whil ...

Deleting content from cells in table for all even td items

This problem has been causing me frustration; I've attempted various methods using jquery and CSS, but to no avail. Essentially, I have the following table structure: <table id="mainTable"> <thead> <tr> <th>Arrival ...

Toggle the visibility of an element with a single button click

Below is a snippet of my sample code: SAMPLE HTML CODE: <ul> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <l ...

Ways to prevent images from vanishing when the mouse is swiftly glided over them

Within the code snippet, the icons are represented as images that tend to disappear when the mouse is swiftly moved over them. This issue arises due to the inclusion of a transition property that reduces the brightness of the image on hover. However, when ...

The background image on my CSS is not showing up

I just added the file to my git repository and shared the link here. Is there a specific way to do this? html{ background-image:url("https://github.com/vindhya97/images/blob/master/pinkbackground.jpg"); } ...

Pictures change positions in online email interfaces like gmail

Hey there! I'm encountering an issue with the image on my website. The image is contained within a container and seems to extend a bit to the right. Everything looks perfect in all email clients except for web-based ones like Hotmail and Gmail. Here a ...

Which font file format is the most suitable for my website?

I've been doing some research on fonts for my website, and I've come across various formats available. Now I'm curious about what the standard format is or if there are multiple standard formats. .TTF (True Type Font) .EOT (Embedded OpenTyp ...

Placing information on the opposite sides of a table cell

I am currently working on a monthly calendar table where each cell displays the date in the top left corner and has a "+" button in the bottom right corner for adding content to that day. Everything works fine when all cells have the same height, but it br ...

Angular 14: Exploring the left datepicker panel navigation in PrimeNG

In my situation, I am trying to adjust the position of the date-picker in relation to a panel displayed within a <p-calendar> element. Due to a splitter on the right side, I need to shift the date-picker towards the left. Here is the HTML code: < ...

JQuery Mobile: Adding fresh, dynamic content - CSS fails to take effect

I've encountered this issue before, but I'm still struggling to resolve it. When adding dynamic content to a page (specifically a list-view), the CSS seems to disappear once the content is added. I've tried using the trigger("create") functi ...

The CSS styles are not recognized by the Windows 2003 server

After deploying my webapp, which was created using asp.net, to a testing server (Windows 2003 SP2, IIS6), I encountered an issue. When I accessed the default page, none of the CSS styles were applied. Only plain text or formatting from the .aspx file was v ...