The screen size dominates all the other specifications

I've been attempting to adjust the category images based on screen size, but it seems that only the first specified width is being applied. It appears that subsequent rows of code are being overridden by the initial max-width setting (769px) on this website:

How can I ensure that the category image changes 3 times as intended?


.category-list-item {
  float: left;
  padding: 1em;
}
@media screen and (max-width: 769px) {
  .category-list-item { width: 20%; }
};
@media screen and (min-width: 480px) {
  .category-list-item { width: 25%; }
};
@media screen and (max-width: 480px)  {
  .category-list-item { width: 33.33%; }
};

I would greatly appreciate any assistance in resolving this issue! / Martin

htmlcss

Answer №1

  1. Make sure to remove any extra semi-colons ; at the end of your queries.

Ensure your queries are structured correctly like this:

@media screen and (max-width: 769px) {
  .category-list-item { width: 20%; }
}
@media screen and (min-width: 480px) {
  .category-list-item { width: 25%; }
}
@media screen and (max-width: 480px)  {
  .category-list-item { width: 33.33%; }
}
  1. Avoid conflicting queries by specifying a range for each, as shown below:

    @media (max-width: 480px) {
      .category-list-item{width: 33.33%;}
    }

    @media (min-width: 481px) and (max-width: 768px) {
        .category-list-item { width: 25%; }
    }
    @media (min-width: 769px) {
        .category-list-item { width: 20%; }
    }

If you're unsure about the min-width:769px, please clarify your intentions and I'll adjust accordingly. The examples provided are meant to illustrate how queries function.

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

The React component is not appearing in Internet Explorer 11

When using a React directive, I invoke it like this: <react-component name="StartAll" props="ctrl.props"> </react-component> Everything works fine in Chrome, Firefox, and Opera, but in IE 11, the React component does not display at all. There ...

htmlreactjs

Is there a way to display the # symbol instead of characters in the input text field?

I have a text input field in a PHP page with a maxlength attribute set to 11. This input field is specifically used for entering phone numbers. The requirement is that when the user types a phone number, it should display as "#" symbols for all 11 characte ...

javascriptjqueryhtmltextbox

Using jQuery to swap an image with a div element and then using the image as the

I have a collection of images in a div, like so: <div class="image-container"> <img width="174" height="174" src="http://mysite.com/images/portfolio/p1.jpg" class="image-style" typeof="foaf:Image"> <img width="174" height="174" src= ...

jqueryhtmlcss

The text remains separate from the image

I am attempting to arrange text around an image, with the image on the left and text on the right. Despite using the latest version of Bootstrap and assigning col-3 and col-9 to both sides, I am facing issues. The text does not move below the image when it ...

htmlbootstrap-5

The Selenium python tool is reporting that the element at coordinates (X, Y) is not clickable, as another element is blocking it from receiving the click. It's important to note that

Here is a link to an online store that I need to extract information from. Specifically, I am looking to access the Most Helpful, positive, negative, most recent, and certified buyers' sections in order to scrape the values within them. Unfortunately, ...

pythonhtmlseleniumxpath

In order for a page to display on a Firebase hosting URL, it must include the

I'm currently in the process of hosting a website using Google Firebase. The index.html is displayed as (for example) app.firebase.com, however, if I want to access a page like login.html, I have to enter app.firebase.com/login.html instead of just ap ...

htmlnode.jsfirebasefirebase-hosting

Identifying collisions or contact between HTML elements with Angular 4

I've encountered an issue that I could use some help with. I am implementing CSS animations to move p elements horizontally inside a div at varying speeds. My goal is for them to change direction once they come into contact with each other. Any sugges ...

cssangulartypescriptanimation

What is the best way to make an ajax commenting system function from a separate directory?

I am facing an issue with implementing an ajax commenting system on my website. When I place all the code from the /comment directory directly in the root, everything works fine and the commenting system functions as expected on new pages. However, when I ...

phpjavascriptmysqlhtmlajax

Is it possible to utilize CSS to form a triangle outline on the right-hand side of a Bootstrap list group?

https://i.sstatic.net/vSoa0.png Hey everyone! I'm trying to achieve a triangle shape using CSS at the end of a list item. I've utilized the list group component from Bootstrap to display my list. Below is a snippet of my code. I've als ...

javascripthtmlcssbootstrap-5

Is it possible to create a webpage that is invisible to users accessing it from a desktop device

Is it possible to create a webpage that is only visible on tablet and mobile devices, while redirecting desktop users somewhere else? I want this page to be hidden from desktop users entirely. ...

htmlcss

Utilizing if conditions within loops in a Jade template

Hey there. I am attempting to create a `tr` element at the start and after every 9th item. I am using the modulo operator as shown in the example above. However, if I want to include `td` elements inside that same `tr`, with an `else` condition for inst ...

htmlnode.jsexpresspugeach

The scroll bar remains hidden even though there are additional elements waiting to be displayed

I am currently utilizing asp.net along with entity framework 4 On my page, I have three tabs structured like this: The Challenge I'm Facing The issue I am encountering is that the browser fails to display a scrollbar even when there are over 150 ro ...

asp.netcss

Creating a standalone Wordpress child theme with its own CSS

After creating a child theme based on the responsive i-transform theme from http://templatesnext.org/itrans/, I found myself continuously undoing the i-transform CSS, which is taking up a lot of my time. However, if I remove the entire parent stylesheet, t ...

htmlcsswordpress

Utilizing JavaScript to arrange the dots around the circle proves to be glitchy

I am having trouble positioning dots around a circle. The top and bottom points are not aligning properly, resulting in a buggy display. What could be causing this issue? How can I fix this problem? $(function(){ var globe = $('#center') ...

jqueryhtmlcss

Discovering uncategorized elements using javascript

Let's say I have a piece of HTML with some content that is not wrapped in any tags, like this: <html> <body> <p>text in a tag</p> other text outside any tag </body> </html> Is there a way to access the untagged el ...

javascripthtmldom

Tips for verifying the existence of a row with a specific id using jQuery

Is there a way to use jQuery to verify if a table contains a row with a certain id? ...

javascriptjqueryhtmljsonasp.net-mvc-3

Issues with CSS hovering effects

this is my unique code snippet CSS Stylesheet .Navigation-signIn { background-color: #c8db5a; } .Navigation-signIn։hover { background-color: #ffffff; } JSX Component import { NavLink } from "react-router-dom"; import { BrowserRouter } fro ...

cssreactjs

What is the most effective method for embedding a Kotlin program into a website?

I have created a combat simulation tool in Kotlin for an online gaming community. Users can input the combat levels of two players, choose the number of duels to simulate, and then initiate the simulation which will provide win percentages and other stats. ...

javascripthtmlcsskotlin

Implementing Object Value Assignment to an Element Using jQuery

I recently received a set of data via an API request: https://i.stack.imgur.com/YGe2D.jpg In order to display this data as selectable options, I included the following code snippet in my AJAX script: $.each($(value.routes), function(index, route){ $ ...

jqueryajaxhtmlobject

Ways to create CSS styles dynamically in PHP using database-driven methods

Currently, I am in the process of developing an application that gives users the ability to select different style options within the app. These choices will then be utilized to create a dynamic web page. I am curious about the various methods available to ...

phpcssstylesheet