Create two div elements containing responsive images using HTML and CSS

Can someone assist me in creating responsive DIVs with images inside?

Currently, the second div is appearing below the first one, and I'm struggling to make them scale based on mobile and tablet screen sizes.

Here is the code snippet:

    .new_banner_homepage {
      width: 570px;
      float: left;
      min-height: 1px;
      margin-left: 30px;
      margin-bottom: 20px;
      border-radius: 5px;
      box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
      transition: all 0.2s linear 0s;
      transition-property: all;
      transition-duration: 0.2s;
      transition-timing-function: linear;
      transition-delay: 0s;
    }
    @media only screen and (max-width: 239px) {
      .new_banner_homepage {
        width: 90%;
      }
    }
<div class="new_banner_homepage">
  <a href="#">
    <img data-retina="true" src="http://placehold.it/570x150" alt="">
  </a>
</div>
<div class="new_banner_homepage">
  <a href="#">
    <img data-retina="true" src="http://placehold.it/570x150" alt="">
  </a>
</div>

htmlcssresponsive-design

Answer №1

In order to ensure that a div is responsive, it is important to utilize percentages for the width instead of fixed pixel values. Pixels provide a static width that remains consistent across all devices, while percentages are flexible and adjust proportionally based on the screen size. For example, 25% of a desktop monitor would be greater than 25% of a smartphone.

One challenge that may arise is how to scale down images when the div size is reduced, as images typically have fixed dimensions compared to the variable dimensions of a percentage-based div.

To address this issue, you can apply the following CSS rule with the image's dimensions specified within the image itself:

img {
    width: 100%;
    height: auto;
}

Additionally, it is recommended to include the following viewport meta tag in the head section of your HTML document:

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

Answer №2

Have you inserted the meta tag into your HTML document?

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

Answer №3

Thank you for all your responses,

1) I attempted to adjust the width of .new_banner_homepage from 570px to 25%;

This resulted in my image becoming smaller on desktop and extremely tiny in device mode. 2) I experienced this effectively: in my head tag.

I may have missed some information because I am using a purchased template... : complete code below :

<div class="container">

 <div class="new_banner_homepage"><a href="#"><img  data-retina="true" src="{{media url='wysiwyg/img1.png'}}" alt=""></a> </div>
 <div class="new_banner_homepage"><a href="#"><img  data-retina="true" src="{{media url='wysiwyg/img2.png'}}" alt=""></a> </div>


</div>

and css :

.container{

width: 1170px;
margin-right: auto;
margin-left: auto;
}

.new_banner_homepage{
width: 25%;
float: left;
min-height: 1px;
margin-left: 30px;
margin-bottom: 20px;
border-radius: 5px;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
transition: all 0.2s linear 0s;
transition-property: all;
transition-duration: 0.2s;
transition-timing-function: linear;
transition-delay: 0s;
}

@media only screen and (max-width: 25%){
    .new_banner_homepage{ width: 25%; }

Thanks

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 stop-color property is not functioning as expected in CSS/SVG

Here is the code I am currently working with: <?xml version="1.0" standalone="yes"?> <svg xmlns="http://www.w3.org/2000/svg" width="360" height="240"> <style>stop{stop-opacity:1}circle{fill:url(#r)}</style> <defs> <radialG ...

csssvg

How to set the default theme color for the mat-sidenav background in Angular 6 and 7?

Is there a way to make the background of a mat-sidenav match the theme color of my mat-toolbar? In the file src\styles.scss, I have the following: @import '~@angular/material/prebuilt-themes/indigo-pink.css'; The template / HTML file incl ...

htmlcssangularangular-material

Incorporating a fixed header title when creating a customizable table

I am working on creating a dynamic table with rows and columns based on JSON data. JSON: $scope.dataToShow=[ tableHeder=["First Name","Age"], { name:"rahim", age:23 }, ...

javascripthtmlangularjs

Transition in the background color of a button while the superfish menu gracefully drops down

I am currently using a customized drop down menu created with Superfish. My goal is to incorporate an independent fade-in effect for the drop down menu. The background color should change on mouseover and the drop-down box should fade in gradually. You ca ...

jquerycssdrop-down-menufadeinsuperfish

Layering an object on top of a clone using CSS

I am working on a webpage with a jQuery menu located at the following link: Menu To accommodate more items and have greater control, I duplicated the menu twice. However, when hovering over them, the duplication is visible in the background. Is there a ...

jqueryhtmlcss

One way to create dynamic function parameters in JavaScript is by using

Currently, I am in the process of implementing a payment API checkout feature on my order.html page. However, I have encountered an issue where I need to add a script in the head of the HTML document. This script requires me to specify the subtotal amoun ...

javascripthtml

Achieving centered positioning for the 'row' class in Foundation 5, regardless of browser size

While viewing on desktop, the body is centered which is ideal. However, resizing the browser causes it to stretch to fit the full width and I want to avoid this. Regardless of the browser size, I want the first div with the "row" class to be centered with ...

htmlcsszurb-foundation

Troubleshooting problems with footer size in wkhtmltopdf

I am facing an issue while trying to convert an HTML file to a PDF format. Specifically, when attempting to include a footer, the size rendered in the PDF does not match the one specified in the CSS. The designated size for the footer should be exactly 15 ...

phphtmlwkhtmltopdf

What is the process for developing an Alphabetizer Program?

I have been working on this and I am having trouble getting the "alphabetized" version to display. I've tried a few things already, but I'm not sure what is missing or needs to be changed. Any advice on how to fix this would be greatly appreciate ...

htmlarraysalphabetical

The design I created includes a horizontal scroll feature and certain elements are not properly aligned in the

Oh man, I'm really frustrated right now. I want all my elements to be centered horizontally on smaller devices, but some of them are slightly off to the side. And to top it off, there's a horizontal scroll appearing - it's like something is ...

htmlcss

Inherit margins from child elements with fixed positions

Below is a very basic code example to consider: <div id="parent"> <div id="child"> Test it </div> </div> This code snippet includes the following CSS styles: #parent{ position:relative; margin-left:200px; color:#FFF; } #chi ...

htmlcss

Tips for choosing the default tab on Bootstrap

I have a question about an issue I am facing with my Angular Bootstrap UI implementation. Here is the code snippet: <div class="container" ng-controller='sCtrl'> <tabset id='tabs'> <tab heading="Title1"> ...

javascriptcssangularjstwitter-bootstrapangular-ui-bootstrap

Menu options displayed with the help of HTML5 tags

Currently, I am experimenting with creating an interactive HTML5 dropdown menu in my spare time. While researching on W3Schools about dropdown menus, I noticed that all of them utilize CSS classes and id's for styling. This is a snippet of the HTML c ...

htmlcssdrop-down-menunavdropdown

Utilize a button to apply styles to a Span element dynamically generated with JavaScript

I am attempting to spin a span generated using JavaScript when a button is clicked. The class is added to the span, but the spinning effect does not apply. <p>Click the button to create a SPAN element.</p> <button onclick="myFunction ...

javascripthtmlcss

Striving to convert Celsius to Fahrenheit using ReactJS

I am currently attempting to convert Celsius into Fahrenheit within this specific div. Despite being fairly new to React, I’m finding it challenging to determine where exactly to place the conversion calculation. return ( <div className="app& ...

cssreactjs

What steps do I need to take in order to resolve the routing issue with angular.js in my

Working on a mobile application with angular.js and firebase.js has been both exciting and challenging. Recently, I encountered an issue where the page refused to load properly because it was trying to access a peculiar URL file://file:///Users/patutinskij ...

angularjshtmlurl-routingangular-routingngroute

Using a twig loop to display just a single table cell

The following twig loop is used to generate data: {% for reservationDate, rooms in data.pricingTable %} <tr> <td> {% for room in rooms %} <tr> <td ...

htmltwig

Why is the current Menu Item highlight feature not functioning properly?

Why isn't the highlight current Menu Item feature working? I've checked my code, but it doesn't seem to be functioning as expected. Could you lend me a hand? Html: <section id="menu-container"> <div id="bar"><img src="b ...

javascriptjqueryhtmlcss

Is there a way to implement a scrollbar that only scrolls through one specific column in an HTML table?

I need help adding a scrollbar to a specific column in an HTML table. Take a look at this scenario https://jsfiddle.net/6wpdc4tL/: https://i.stack.imgur.com/svzIg.png This table should have two scrollbars, one for the light blue SCROLL column and another ...

javascripthtmlcsshtml-table

Is there a specific explanation as to why ng-repeat-start is not functioning properly even with the most recent version of AngularJS?

Can someone please explain why ng-repeat-start is not functioning properly despite using the most up-to-date AngularJS version? I have included it from the CDN: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></scr ...

javascriptjqueryhtmlangularjs