Why is the media query not affecting this image?

  <div class="col-lg-6" >
   <img src = "iphone6.png" id="dog-mobile" alt="phone">
   </div>

#dog-mobile{
    height:600px;
    position: absolute;
    right: 25%;
    transform: rotate(25deg);
    }
@media(max-width:1000){
    #dog-mobile{
         position: static;
         transform: rotate(0deg); 
        }
    }

<The media query for the image is not functioning properly, as it should be positioned statically and straight below 1000px width but it fails to do so. Additionally, this image is within a grid Bootstrap class of col-lg-6. Refer to this output image screenshot for visualization.>

htmlcssbootstrap-4css-selectorsmedia-queries

Answer №1

Make sure to include the following line in the <head> section of your HTML page:

<meta name="viewport" content="width=device-width, initial-scale=1">

Don't forget to adjust the CSS code as provided below:

#dog-mobile{
    height:600px;
    position: absolute;
    right: 25%;
    transform: rotate(25deg);
    }
@media screen and (max-width: 1000px) {
    #dog-mobile{
         position: static;
         transform: rotate(0deg); 
        }
    }

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

What is the best method to change the value of a nearby TD text box?

I am currently developing a shopping cart application that requires me to update product screens based on users' previous orders stored as local JSON data. The product screen is built using JSON returned from the server. My goal now is to automatical ...

javascripthtmljqueryjsonangularjs

The header section on a website not behaving as expected in the Chrome browser

For my website, I want it to look like this in Internet Explorer: https://i.stack.imgur.com/hSkVM.png ^^ This is the IE view However, in Chrome, it displays like this: https://i.stack.imgur.com/noQw8.png The issue is with the Top bar on Chrome showing co ...

htmlcssinternet-explorergoogle-chrome

What are the steps to modify data within the root component?

I am currently working on a Vue project with vue-cli and routes. In my App.vue file, the template structure is as follows: <template> <div id="app"> {{Main}} <router-view></router-view> </div> </template&g ...

javascripthtmlvuejs2vue.js

Issue with React rendering numbers without displaying div

In my user interface, I am attempting to display each box with a 1-second delay (Box1 after 1 second, Box2 after another 1 second, and so on). https://i.sstatic.net/FdTkY.png However, instead of the desired result, I am seeing something different: https ...

javascripthtmlcssreactjsreact-dom

The box-shadow feature seems to be disabled or ineffective when trying to send HTML content via

I am having a unique approach to sending emails using html. To combat the issue of image blocking by email providers, I have resorted to utilizing box-shadow to create the images I require. The strange thing is that it appears perfectly fine in the browser ...

htmlcsshtml-email

Having trouble with JQuery's append method on the <head> tag?

I am having an issue with this particular code block. It seems to be unable to insert the meta tag into the head section. Any suggestions on how to resolve this problem? <html> <head> <title>hello world</title> </head> < ...

javascriptjqueryhtmlmeta

Retrieve Image Data by Clicking on Canvas at Precise Coordinates

JS Fiddle Link I'm attempting to implement functionality where a canvas with a linear gradient can be clicked, capturing the image data at that specific point. Additionally, I aim to position a yellow picker relative to the click point on the canvas ...

jquerycsshtml5-canvasgetimagedata

The stunning fade effect of Magnific Popup enhances the visual appeal of the inline gallery

I'm currently using magnific popup for an inline gallery, but I'm not seeing any effects. I would like to have a fade effect when opening/closing the popup. Can someone assist me with achieving this? https://jsfiddle.net/gbp31r8n/3/ [Check o ...

javascriptjqueryhtmlcssmagnific-popup

An easy way to incorporate a fade-in effect for every word in a text

I am trying to make the text "Eat. Sleep. Repeat." slide up and fade in one word at a time. I have experimented with various methods like anime.js, keyframes, and adding css classes, but so far none of them have worked for me. Here is the code I currently ...

javascripthtml

The Border Radius Problem in Google Chrome

Greetings! I am currently working on a project for a website and have encountered an issue with the gallery on the projects page. The images are meant to be displayed as circles, and when hovered over, they should maintain their circular shape and have a b ...

cssgoogle-chromeoverflowhidden

Putting Images Next to Each Other - Arranging Them to Be Responsive

I have a pair of images on my webpage that I've aligned next to each other. To enhance the mobile user experience, I want these two images to stack on top of each other when viewed on smaller screens. If anyone can provide guidance on creating respon ...

htmlcssresponsivephoto

Spin the div in the opposite direction after being clicked for the second time

After successfully using CSS and Javascript to rotate a div by 45 degrees upon clicking, I encountered an issue when trying to rotate it back to 0 degrees with a second click. Despite my searches for a solution, the div remains unresponsive. Any suggestion ...

javascriptjquerycss

Styling multiple checkbox items in an Angular Material Autocomplete

Is there a way to adjust the height of autocomplete multiple checkbox items in Angular Material? I'd like it to look like this With a line item height of 18px But instead, it looks like this when using multiple checkboxes With a different checkbox ...

cssangularsassangular-material

JavaScript popup is no more visible on the webpage

Recently, I implemented a pop-up on my website that used cookies to prevent it from appearing every time a user visited a page. However, after making this change, the pop-up stopped showing altogether. Despite my best efforts in testing, researching, and s ...

javascriptjqueryhtmlcss

Utilize one ajax response for three distinct sections/divisions

After making an ajax call, I am receiving a total of 27 results that I need to divide equally into three sections, with 9 results in each. The sections are displayed below: HTML: <div id="content"> <section> </section> <s ...

javascriptjqueryajaxhtml

VueJs causing Bootstrap Progress Bar to be Invisible in Browser

In my project using Vue2 (webpack-simple), I am attempting to incorporate a Bootstrap progress bar into a component. Even though the progress bar is displaying in the component, it lacks the visual progression indicated by aria-valuenow. I have included a ...

vuejs2bootstrap-4progress-barvue-component

Vuetify's data table now displays the previous and next page buttons on the left side if the items-per-page option is hidden

I need help hiding the items-per-page choices in a table without affecting the next/previous functionality. To achieve this, I've set the following props: :footer-props="{ 'items-per-page-options':[10], &apo ...

javascripthtmlcssvue.jsvuetify.js

Looking for a plugin that can color the text "Google" in the exact shade as the Google logo? Check out this jQuery

Is there a jQuery plugin or similar tool available that can change the color of each letter in the word "Google" to match the colors of the Google logo? For instance, if I have the following HTML markup: <span>Google AdWords</span> I would l ...

jquerycssjquery-pluginstarget

Embedded HTML code within a table cell

How can I dynamically build an HTML string and display it inside a cell in reactJS' ag grid? Here's my example: function generateHtmlString(props) { let myHtmlString = "<span>a</span>"; myHtmlString += "--"; myHtmlString += "&l ...

htmlreactjsag-grid

Changing the Input Label Color on Hover in Material-UI TextField

I have a custom styled Mui TextField called CustomTextField. It changes the input background color and font color on hover, but I also want to change the label font color when hovered over. Currently, the input background changes from black to white on hov ...

cssreactjsmaterial-ui