Issues with the functionality of media queries

I'm trying to create a slider on my website using media queries to adjust the image size. Here's my CSS code:

#myCarousel .item {
    height:400px;
}
#slide1{
    background:url("bdpics/CoxBazar/new folder/coxE_4_md.jpg") top center no-repeat;
}
#slide2{
    background:url("bdpics/CoxBazar/new folder/cox_3_md.jpg") top center no-repeat;
}
#slide3{
    background:url("bdpics/CoxBazar/new folder/coxE_4-avrg.jpg") top center no-repeat;
}

/* -------------------Media queries--------------------------------*/
/* ----- portrait and landscape phone------------------------------------*/
@media(max-width: 480px){

    #myCarousel .item {
        height:270px;
        width:100%;
    }
    #slide1{
        background:url("../bdpics/CoxBazar/new folder/cox_3_sm.jpg") top center no-repeat;
        background-size:100% 100%;
        min-width: 100%;
        height: 675px;
    }
    #slide2{
        background:url("../bdpics/CoxBazar/new folder/coxE_4_sm.jpg") top center no-repeat;
        background-size:100%;
    }
    #slide3{
        background:url("../bdpics/CoxBazar/new folder/cox_24_sm.jpg") top center no-repeat;
        background-size:100%;
    }
}

/* ----- landscape phone and portrait tablet----------------------------*/
@media(max-width: 768px){

    #myCarousel .item {
        height:420px;
        width:100%;
    }
    #slide1{
        background:url("../bdpics/CoxBazar/new folder/cox_3_md.jpg") top center no-repeat;
        min-width: 100%;
        height:420px;

    }
    #slide2{
        background:url("../bdpics/CoxBazar/new folder/coxE_4_md.jpg") top center no-repeat;
        min-width: 100%;
        height:480px;
        background-size:100% 100%;
    }
    #slide3{
        background:url("../bdpics/CoxBazar/new folder/cox_24_md.jpg") top center no-repeat;
        min-width: 100%;
        height:480px;
        background-size:100% 100%;
    }
}


@media(max-width: 1200px){
    #myCarousel .item {
        height:580px;
        width:100%;
    }
    #slide1{
        background:url("../bdpics/CoxBazar/new folder/cox_3_lg.jpg") top center no-repeat;
        min-width: 100%;
        height:580px;
        background-size:100% 100%;
    }
    #slide2{
        background:url("../bdpics/CoxBazar/new folder/coxE_4_lg.jpg") top center no-repeat;
        min-width: 100%;
        height: 580px;
        background-size:100% 100%;
    }
    #slide3{
        background:url("../bdpics/CoxBazar/new folder/cox_24_lg.jpg") top center no-repeat;
        min-width: 100%;
        height: 580px;
        background-size:100% 100%;
    }

Everything is working fine for @media(max-width: 1200px), but when the screen width is less than 768px, it loads the large image instead of the medium or small ones. I need help finding where I went wrong.

htmlcss

Answer №1

To apply restrictions, specify the ranges as follows:

@media(max-width: 480px){
...
}

@media(min-width: 481px) and (max-width: 768px){
...
}

@media(min-width: 769px) and (max-width: 1200px){
...
}

An optimized method is to implement a mobile first strategy by defining rules for mobile devices first and then adjusting them for higher resolutions like so:

#slide1{
   background:url("image1.jpg"); /* image for mobile */
}
@media(max-width: 768px){
    #slide1{
        background:url("image2.jpg"); /* image for 768px+ */
    }
}
@media(max-width: 1200px){
    #slide1{
        background:url("image3.jpg"); /* image for 1200px+ */
    }
}

For more information, check out: MDN - CSS media queries - MDN - Mobile first

Answer №2

Hey there, do you find this information helpful?

#myCarousel .item {
    height:400px;
}
#slide1 {
    background:url("bdpics/CoxBazar/new folder/coxE_4_md.jpg") top center no-repeat;
}
#slide2 {
    background:url("bdpics/CoxBazar/new folder/cox_3_md.jpg") top center no-repeat;
}
#slide3 {
    background:url("bdpics/CoxBazar/new folder/coxE_4-avrg.jpg") top center no-repeat;
}
/* -------------------Media queries--------------------------------*/

/* ----- portrait and landscape phone------------------------------------*/
 /* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
   #myCarousel .item {
        height:270px;
        width:100%;
    }
    #slide1 {
        background:url("../bdpics/CoxBazar/new folder/cox_3_sm.jpg") top center no-repeat;
        background-size:100% 100%;
        min-width: 100%;
        height: 675px;
    }
    #slide2 {
        background:url("../bdpics/CoxBazar/new folder/coxE_4_sm.jpg") top center no-repeat;
        background-size:100%;
    }
    #slide3 {
        background:url("../bdpics/CoxBazar/new folder/cox_24_sm.jpg") top center no-repeat;
        background-size:100%;
    }
}

@media screen and (max-device-width: 640px) and (orientation: landscape){
      #myCarousel .item {
        height:270px;
        width:100%;
    }
    #slide1 {
        background:url("../bdpics/CoxBazar/new folder/cox_3_sm.jpg") top center no-repeat;
        background-size:100% 100%;
        min-width: 100%;
        height: 675px;
    }
    #slide2 {
        background:url("../bdpics/CoxBazar/new folder/coxE_4_sm.jpg") top center no-repeat;
        background-size:100%;
    }
    #slide3 {
        background:url("../bdpics/CoxBazar/new folder/cox_24_sm.jpg") top center no-repeat;
        background-size:100%;
    }


}
/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
       #myCarousel .item {
        height:270px;
        width:100%;
    }
    #slide1 {
        background:url("../bdpics/CoxBazar/new folder/cox_3_sm.jpg") top center no-repeat;
        background-size:100% 100%;
        min-width: 100%;
        height: 675px;
    }
    #slide2 {
        background:url("../bdpics/CoxBazar/new folder/coxE_4_sm.jpg") top center no-repeat;
        background-size:100%;
    }
    #slide3 {
        background:url("../bdpics/CoxBazar/new folder/cox_24_sm.jpg") top center no-repeat;
        background-size:100%;
    }
}

 /* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
  @media screen and (min-device-width: 768px) and (max-device-width: 1024px){

        #myCarousel .item {
            height:420px;
            width:100%;
        }
        #slide1 {
            background:url("../bdpics/CoxBazar/new folder/cox_3_md.jpg") top center no-repeat;
            min-width: 100%;
            height:420px;
        }
        #slide2 {
            background:url("../bdpics/CoxBazar/new folder/coxE_4_md.jpg") top center no-repeat;
            min-width: 100%;
            height:480px;
            background-size:100% 100%;
        }
        #slide3 {
            background:url("../bdpics/CoxBazar/new folder/cox_24_md.jpg") top center no-repeat;
            min-width: 100%;
            height:480px;
            background-size:100% 100%;
            }

}
}

    @media(min-width: 1024px) {
        #myCarousel .item {
            height:580px;
            width:100%;
        }
        #slide1 {
            background:url("../bdpics/CoxBazar/new folder/cox_3_lg.jpg") top center no-repeat;
            min-width: 100%;
            height:580px;
            background-size:100% 100%;
        }
        #slide2 {
            background:url("../bdpics/CoxBazar/new folder/coxE_4_lg.jpg") top center no-repeat;
            min-width: 100%;
            height: 580px;
            background-size:100% 100%;
        }
        #slide3 {
            background:url("../bdpics/CoxBazar/new folder/cox_24_lg.jpg") top center no-repeat;
            min-width: 100%;
            height: 580px;
            background-size:100% 100%;
        }
    }

`

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

When a child of a flex-item does not inherit the height of its parent in a flex container with a column direction and flex-basis set

Wow, that title was long! Let me try to clarify my confusion: So I have a flex-container with 2 flex items. <!-- HTML --> <div class="container"> <div class="item-1"> <div class="child-of-item-1"></div> < ...

htmlcssflexbox

I came across a small piece of CSS code that isn't functioning properly when tested on jsfiddle

I'm on the hunt for a cool "typing animation" with three dots. Stumbled upon this gem online -> https://codepen.io/mattonit/pen/vLoddq The issue is, it doesn't seem to work for me. I even tried it on jsfiddle and it just stops working. I att ...

css

Deleting a <div> element solely by its unique identifier in plain HTML text without any tags can be achieved in the following way

After my previous question was closed, I realized that the provided answer did not meet my needs. I am actually looking to hide not just the HTML text Received, but the entire row containing 0 <3 Received. A simple display: none; would suffice for this ...

htmlcss

Trouble with Displaying HTML Table in Bootstrap 4.3.1 Tooltip

Struggling for hours to set up a custom HTML table in a tooltip box, I finally found that the Bootstrap version solves the issue. Surprisingly, it works perfectly under Bootstrap 4.0.0 but fails under Bootstrap 4.3.1. Could this be a bug or am I overlooki ...

javascripthtmlcssbootstrap-4

Is it possible to make the li elements within my ul list display on multiple lines to be more responsive?

My credit card icons are contained within a ul. I have used the properties background-image and display:inline for the LIs, which display nicely on larger screens. Unfortunately, when viewed on mobile devices, the icons are cut off. My question is whether ...

htmlcsshtml-listsresponsive

Center a sans-serif font vertically with exact precision while adjusting the font size

My issue is an expansion of a previous problem I mentioned in another question, which can be found here Vertically align sans-serif font precisely using jquery/css. To summarize: I am aiming to align two divs containing text, with one positioned above the ...

javascriptjqueryhtmlcssfonts

Problems arise when attempting to use CSS content for double quotes

Could someone confirm if the syntax '>\0147' is correct? .blockquote p::before { content: '>\0147'; font-family: serif; font-size: 3em; line-height: 0; display: block; margin: 0 0 20px 0; } ...

css

Craft a stunning transparent border effect using CSS

I am trying to achieve a unique border effect for an element using CSS, where the transparency is maintained against the background: This is the desired outcome: https://i.stack.imgur.com/6Z1MU.png However, the border I am currently able to create looks ...

htmlcssborder

positioned the div within the StickyContainer element to ensure it remains fixed in place

I've been working on making a div sticky in a React project. To achieve this, I added the react-sticky package to my project. I placed the div within the StickyContainer component as per the documentation. Although there are no visible errors, the sti ...

javascripthtmlreactjsreduxmaterial-ui

Managing several instances of NgbPagination on a single webpage

I am facing a challenge with having multiple NgbPagination components on a single page. For more information, please visit: Initially, I attempted to use ids but encountered an issue where changing one value in the first pagination affected both tables. ...

htmlcssangularpaginationng-bootstrap

Can you tell me the proper term for the element that allows CSS properties to be changed after a link has been clicked?

I have integrated a horizontal scrolling date selector on my website, and it is functioning well. However, I am facing an issue while trying to change the CSS properties of a clicked date link using jQuery. Despite successfully firing the click event, I am ...

javascriptjqueryhtmlcss

What is the most effective way to retrieve the inner HTML of an HTML tag using JavaScript or jQuery?

Let's consider the following code snippet: <p class="question"> this is my paragraph <p> And i'm inside tag in question class <h1> And this is my heading</h1> </p> </p> Now, the challenge is t ...

javascriptjqueryhtmlcss

Show an image when hovering over a dot using CSS - without hovering directly on the image

I'm currently working on a merchandising page that involves photoshopping several products onto a background image. I want customers to be able to hover over a dot positioned on each product to reveal its information and provide a link similar to . Ho ...

htmlcss

Tips for implementing a responsive Object fit cover on an image card in Boostrap 4

Is there a way to maintain the responsive layout of Bootstrap 4 while applying object-fit: cover; to an image in a card element? This would help ensure that the image fits properly without sacrificing responsiveness. #imgUNcover { width: 285px; heig ...

cssimagebootstrap-4object-fit

Using z-index to position a paragraph element behind other elements in a webpage

I am facing a challenge where I want to hide a paragraph within an element, and layer it behind another element. Despite my attempts with z-index, I have been unsuccessful in achieving this effect between the elements. Could someone shed some light on why ...

htmlcssz-indexstylesheet

Using an image as a dropdown menu in HTML: A step-by-step guide

I am facing a challenge in creating an HTML/CSS button that should display a dropdown when hovered over, but unfortunately, it's not working as expected. Here is the link to the code. .Panel { overflow: hidden; width: 25%; height: 100%; co ...

htmlcssbuttondrop-down-menuhover

PHP: Incorrect URL formats with or without a variable present

I am currently working on customizing a PHP web application and could use some assistance. The Application is originally set up to operate in the ROOT path of the Webserver. I have made some modifications to make it work in different paths, but I am facing ...

phphtmlvariables

Restricting the background color to the width of the heading

I am attempting to have a background color strictly surround the text of the heading without extending across the entire width of the page. I recognize that block level elements automatically occupy the full width of the page, so I am exploring alternative ...

htmlcss

Tips for choosing an ID in Jquery to use in an if statement

I'm trying to create a form selector that will display different outputs depending on the selected option. However, I'm having some trouble getting it to work. Below is my current code: <!doctype html> <html> <head> <meta ch ...

javascriptjqueryhtml

Browsing through dual snap points simultaneously on Google Chrome

I'm currently developing a website that incorporates scroll snapping for 3 viewport-sized <section> elements set up like so: html, body { scroll-behavior: smooth; scroll-snap-type: mandatory; scroll-snap-points-y: repeat(100vh); scrol ...

htmlcssgoogle-chrome