The columns in CSS grid-template are refusing to change despite the media query code being applied and active

Currently, I am facing an issue while working on a site plugin and trying to utilize CSS grid to showcase posts. Despite the media query being active according to the inspector, the modification in the template columns is not reflecting as expected.

Check out the site URL here:

Below is the snippet of CSS being used:

.post_holder {
    max-width: 100% !important;
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-gap: 56px 24px;
    margin: 24px;
}
@media only screen and (max-width: 1351px) {
    .post_holder {
        grid-template-columns: auto auto auto;
    }
}

Inspecting the element reveals the active rules, as seen here: https://i.sstatic.net/jDE8N.jpg

Typically, altering template columns through media queries has worked for me in the past. I am unsure why this particular code is not showing the desired outcome.

Answer №1

Instead of using grid-column: 1 / 5 for .site_url, consider switching to 1 / 4 when adjusting the number of columns in your media query. This will prevent the creation of an implicit grid and ensure the grid item spans only 4 columns as intended.

Another approach to achieve full width elements in grid without complications is to use grid-column: 1 / -1. By doing so, the grid item will stretch from the first grid line on the left to the last grid line on the right, simplifying the layout.

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

No mouse cursor activity while in Pointer Lock mode

Using Pointer Lock for capturing the cursor in a game being developed in JavaScript with three.js has been quite interesting. Despite extensive online research, the reason why the cursor doesn't seem to move on Chrome OS remains elusive. A working exa ...

What is the best way to ensure that only one accordion tab remains open at a time, preventing it from closing unless a different tab

How can I ensure that only one accordion tab is open at a time, automatically closing any others that are currently open? Here is my current code for the accordion: $('[data-bs-toggle="collapse"]').on('click', function(e) { if ($( ...

What is the best way to create a seamless change from a black to white invert filter?

I'm currently working on a project where I need to change my icons from black to white. After some research, I found that the best way to do this is by using filter: invert(100%). However, when I try to transition it, the change happens abruptly after ...

Having trouble adjusting the height of <a> elements in the navbar

My navbar has an issue where the listed items do not fill the entire height of the navbar. I have tried adjusting padding and margin, but it doesn't seem to be affecting the layout. Any suggestions would be greatly appreciated. Thank you. #navbar { ...

Implementing a password toggle feature on a form that extends Django's default Authentication Form

Incorporating a password toggle feature has become quite the challenge as I extend Django's AuthenticationForm to create my UserLoginForm. Attempting to implement this feature has proven difficult, especially since I have been unable to make use of th ...

Set the size of the website to remain constant

Is it possible to keep your website at a consistent size so that when viewed on a larger screen, it simply adds more background or space to the page? (I prefer not to use media queries to change the style as the screen size increases) ...

Insert some padding above and below every line of text that is centered

I am looking to achieve a specific layout for my website. https://i.stack.imgur.com/dKT52.jpg Here is what I have attempted: <h2>Make search awesome using Open Source</h2> .banner .section_title h2 { font-family: "Oswald", Arial, sans- ...

The hover effect generates a flickering sensation

I am having trouble displaying options on an image when hovering over it, as the displayed options keep flickering. $('a').hover(function(event) { var href = $(this).attr('href'); var top = $(this).next().css("bot ...

"Keeping your HTML content up-to-date with AngularJS dynamic updates

I've noticed that when I upload changes to my AngularJS HTML partial files, there is a caching issue where the old data is displayed. It takes a few refresh actions before the changes become visible. Is there a way to make these changes appear immedi ...

Combining Content on a GitHub Page

Within the <head> section of my index.html, I have successfully utilized these links on localhost: <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link href=&apos ...

What is the method to use Python in writing content within a <div> tag?

Edit To tackle this issue, I have discovered that the sned_keys() method of the selenium driver can provide a solution. Currently, my focus is on creating a webwhatsapp spamming script and the task at hand involves: <div class="input" contenteditable= ...

Displaying a variable in a live HTML user interface

I have successfully created a Python program that captures data from an Arduino Potentiometer and shows it on the Python console. Now, I am working on enhancing the output by displaying it in a local HTML file. I am seeking guidance on how to incorporate t ...

Tips for avoiding the page from reloading when executing a query. I attempted using preventDefault(); which successfully prevented the reload, but it also stopped PHP

function createCounter() { var count = 0; return function () {return count += 1;} } var add = createCounter(); function updateDatabaseOnClick(){ document.getElementById("result").innerHTML = add(); } I'm currently working on implementing a co ...

Create HTML elements based on the information in a JSON object

My goal is to create span elements for each word in my subtitle text, which is stored in a JSON object. Here is the JSON data I am working with: var sub_info = [ {'start': 3.92, 'end': 6.84, 'words ...

Insert a new item into an existing list using jQuery

I am looking to enhance user experience by allowing them to easily add multiple sets of inputs with just one click. I have been experimenting with jQuery in order to dynamically insert a new row of input fields after the initial set. My current approach i ...

Having difficulty recreating the arrow feature in the bootstrap sidebar

I am currently working on creating the fourth sidebar (from the left) using the templates provided in Bootstrap 5 examples. Everything seems to be falling into place except for one issue - I can't seem to get the arrow to rotate when aria-expanded=tr ...

Passing parameters in a jQuery function through a button click

I am trying to figure out how to pass the @item.Id value as a parameter in the click function for a button. Here is the code snippet: <button id="buttonEdit" style="color:darkgreen" data-toggle="modal" data-target="#Ed ...

Using media queries in CSS to create responsive designs

<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="/assets/css/phone.css" /> <link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 768px)" href="/assets/css/tablet.css" /&g ...

When using the .html() method on an object element with the Quicktime classid, Internet Explorer tends to

When utilizing .html() to fetch HTML that includes an object with param tags, IE8 will remove the latter and return an empty object element. Check out this jsfiddle showcasing the problem: http://jsfiddle.net/L9rra/1/. Update: Looking for a solution to re ...

Determine how to use both the "if" and "else if" statements in

/html code/ There are 4 textboxes on this page for entering minimum and maximum budget and area values. The condition set is that the maximum value should be greater than the minimum value for both budget and area. This condition is checked when the form i ...