Define the width and height of images specifically for screens with a maximum device width using @media queries

Having some trouble with the sizing of images on mobile devices. Using the code below, but for some reason, the height remains at 13em on smartphones, despite setting it differently for other devices. Any ideas why this might be happening?

@media only screen and (max-device-width: 60em) {
    /* STYLES HERE for DEVICES with physical max-screen width of 60em */
    article img {
        float: left;
        margin-right: 0.2em;
        width: 100%;
        height: auto;
    }
    }

    article img {
        float: left;
        margin-right: 0.2em;
        height: 13em;
    }

Answer №1

Consider placing the media query beneath the image within the article. On a side note, there is no need to redundantly specify float and margin-right if they are not being overridden.

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

Adjust the dimensions of the canvas without disrupting the existing artwork

I am currently working on a pixel art application where I am facing an issue with saving images from the canvas. The saved image appears small and pixelated when I try to resize it. I would like to resize the image to larger dimensions, but I am unsure of ...

What is the best way to send props to a styled component without needing to convert them to transient props beforehand

Recently, I designed a custom Text component that accepts several props. These props are then forwarded to the styled component where specific styles are applied. However, I am facing an issue where I do not want these props to be passed down to the DOM, b ...

Convert all page links to post requests instead

Currently, I am working on a JavaScript project where my objective is to transform all links on the page into forms. This will enable the requests to be sent using the POST method rather than the GET method. The code I have implemented so far is as follow ...

Creating a dynamic scene with three.js within an HTML div element

I've been searching for solutions but can't seem to figure it out for this particular scenario. https://codepen.io/rkimo/pen/vdwxJj Essentially, I just want to include this blob in a div so that I can add content before and after it and be able ...

Creating a Bootstrap 4 DIV element with horizontal scrolling functionality

I've been struggling to implement a horizontal scroll for a DIV on my site, but none of the common solutions like overflow-x or white-space:nowrap are working for me. This is the section of my website where I need a horizontal scroll bar If you want ...

Can someone please explain how I can extract and display information from a database in separate text boxes using Angular?

Working with two textboxes named AuthorizeRep1Fname and AuthorizeRep1Lname, I am combining them in typescript before storing them as AuthorizeRep1Name in the database. Refer to the image below for the result. This process is used to register and merge the ...

What is the best approach to obtain an inventory of inputs from a particular viewpoint?

I am facing an issue where I have a list of products that require the quantities to be returned along with the reason for return. However, I cannot modify the referenced model as it has an impact on multiple values. Can someone guide me on how to retrieve ...

What is the best method for creating thumbnail URLs for video files in HTML with JavaScript?

I am facing an issue with generating a thumburl for uploaded video files. After dynamically creating an input file and uploading local video files, I am able to retrieve the name and size of the file along with other information as shown in the screenshot ...

pattern to eliminate particular anchor elements

I am facing a challenge with a large HTML file that contains approximately 300 similar anchor tags that need to be removed: <a href="javascript:void(0);" onclick="javascript:thumbs(198, 0, 'architecture')" class="icon"></a> The prob ...

Discover the secrets to replicating the mesmerizing horizontal scrolling menu akin to the

What is the most effective way to create a horizontal menu similar to the innovative Google picture menu? Could someone kindly share their knowledge and provide the code for achieving the same outcome? ...

Removing an MySQL database using a PHP HTML button

While attempting to remove a row from my MySQL PHPMyAdmin database using a button in AssetApprovalForm.php, I encountered an issue. Upon clicking the decline button in AssetApprovalForm.php, nothing happens. Click here for the image of AssetApprovalForm.p ...

Arrange the divs vertically by utilizing flexbox styling

My goal is to use flexbox to vertically align three div blocks. Even though I can successfully align them horizontally, I am facing issues with vertical alignment. What could be the mistake in my approach? .banner { padding- ...

The rotation transformation on the Z-axis occurs once the animation has finished

Currently, the rotation on the Z-axis is occurring after the animation, even though I am still in the early stages of creating an animated hand opening. The intention is for the fingers to only rotate on the X-axis to simulate a realistic hand opening moti ...

"Choosing a div element using nth-child() method: a step-by-step guide

An HTML structure was provided which includes a section with an id of "main-content" and a class of "photo-grid". Inside this section are multiple div elements with a class of "col-1-4", each containing a link, paragraph, and image. <section id="main-c ...

Exploring the implementation of Javascript, HTML, PHP, and Ajax in programming

<div class="navigation"> <a class="prev" href="index.php?month=__prev_month__" onclick="$('#calendar').load('index.php?month=__prev_month__&_r=' + Math.random()); return false;"></a> <!-- <div class="title" & ...

Sending a PHP object as the value of an HTML radio button

When dealing with a custom object that needs to be passed as a form value in a radio button selection, the usual method involves invoking the toString() function on the object. However, this simply converts the object to a String, which may not be ideal fo ...

How to implement multiple conditions with ng-if in HTML

I need to implement a button that is visible only for specific index numbers: <tbody data-ng-repeat="(wholesalerIndex, wholesaler) in wholesalers"> <tr> <td> <but ...

What is the best way to iterate through two separate "div" elements that contain different data in each?

Currently, I am working on implementing a timeline feature in my web application. I have two distinct divs, each containing different data. Despite utilizing a foreach loop, I am encountering unexpected issues with its functionality. Could someone please a ...

Alter the browser's URI without having to reload the page

Is there a way to change the browser URL (or URI) without refreshing the page using HTML5 and HTML5Shiv for IE? For example, if I am currently on http://www.example.com but want to transition to http://www.example.com/4f6gt without the need for a full pa ...

Create a div element containing a captivating background image that automatically scales to fit any browser window

Currently, I am facing a challenge with scaling background images within a shared div (framework) so that they can resize along with the browser. I have searched for solutions involving Javascript, but none seem to address my specific case. Any assistance ...