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

Tips for inserting the <style> element within a Vue.js component

Currently working with Vue.js v2, I am facing an issue where I have a CSS stylesheet stored as a string in a variable. import sitePackCss from '!!raw-loader!sass-loader!../../app/javascript/styles/site.sass'; I am trying to generate a <style& ...

cssvue.jswebpackvuejs2

The functionality of my website is not optimized for viewing on iPhones

While designing a responsive website that looks great on most devices, I noticed some issues with iPhones. The layout breaks in two specific ways on these devices. View Galaxy Screenshot View Sony Screenshot The menu doesn't scale properly on iPho ...

androidhtmlcssiphone

Retrieve the current font style with Kendo UI Editor

Recently, I've been facing some challenges while working with the Kendo UI Editor. Specifically, I'm struggling to retrieve the current font style. My goal is to use JavaScript or jQuery to obtain the following values: Values I am looking for: ...

javascriptjquerycsskendo-ui

The Disabled element does not exhibit effective styling

When we include the disabled attribute in the text element, the style does not work. Can you explain why? <input pInputText [style]="{'padding-bottom':'10px','padding-top':'10px','width':'100%&apos ...

htmlcssangularinternet-explorertypescript

setTimeout executes twice, even if it is cleared beforehand

I have a collection of images stored in the img/ directory named 1-13.jpg. My goal is to iterate through these images using a loop. The #next_container element is designed to pause the loop if it has already started, change the src attribute to the next im ...

javascripthtmlsettimeout

I'm puzzled as to why a scroll bar materializes

I recently encountered an interesting issue while working on my responsive web design project. Upon resizing the browser to a width of 615px or less, a horizontal scroll bar unexpectedly appeared. It's puzzling as to which element is causing this prob ...

cssscrollbarresponsive-designhorizontal-scrolling

Javascript-generated HTML elements are invisible

I am attempting to create a "circle of fifths" using html, css, and javascript. I am following this tutorial: https://blog.logrocket.com/interactive-svg-circle-of-fifths/ Although I am using the astro framework, I don't believe my issue is related to ...

javascripthtmlcssastrojs

What is the best way to include the border-radius CSS property to a dropdown element in Ant Design?

Adding the border-radius CSS property to my dropdown component from ant design has been a bit challenging for me. I attempted to modify the antd-css file and include a style object directly into the component, but unfortunately, I did not achieve the des ...

cssreactjsantdstyled-componentsant-design-pro

Python allows for the retrieval of the aria-label attribute as text based on the div id with the help of libraries like Beautiful Soup

<div id="i19" class="quantumWizTogglePapercheckboxEl appsMaterialWizTogglePapercheckboxCheckbox docssharedWizToggleLabeledControl freebirdThemedCheckbox freebirdThemedCheckboxDarkerDisabled freebirdMaterialWidgetsToggleLabeledCheckbox isC ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

decorating elements in a line with colored backgrounds

I am facing an issue where I want to keep three divs aligned horizontally on the same line, but their background colors are causing them to not align properly. Adding margin or padding causes the divs to wrap up instead of staying in line. #service_cont ...

htmlcsstwitter-bootstrapbootstrap-4frontend

React - Issue with automatic resizing of divs

Currently, I am delving into the realm of ReactJS and have embarked on a small project to enhance my skills. My main goal is to create a resizable div element that can be adjusted by dragging it across the screen. Here is the snippet of code that I have be ...

htmlcssreactjsreact-hooksresize

Creating a column in CSS that maximizes width without utilizing 100% or causing text wrap

Trying to keep a three-column div from spilling over the page can be tricky. The first two columns must not exceed 200px, while the third column should be at least 280px wide. The issue arises when there is a table in the third column with long sentences i ...

htmlcss

Submit data from one form to another form located within an iframe

I am currently using a JX Browser that allows content to be displayed in an iframe. My goal is to automatically transfer the username and password of a user logging into my ticketing software to another form within an iframe. The page within the iframe is ...

javascriptphpjqueryhtmliframe

Rotating an input 90 degrees within a div for unique positioning

I used JavaScript to make an input range vertical, like so: var range_pitch = document.createElement("input"); range_pitch.setAttribute("type", "range"); range_pitch.style.webkitTransform = "rotate(90deg)"; range_pitch.style.mozTransform = "rotate(90deg)" ...

javascriptjquerycsshtml

Draggable slider not functioning properly with linear interpolation

Recently, I've been delving into the world of "linear interpolation" and its application in creating easing effects. However, while the easing functionality of the draggable slider seems to be operational, I'm encountering an issue. The slider re ...

javascripthtmlcsssliderlerp

Guide on how to have two controllers execute identical tasks in Angular while modifying the appearance of the website

Trying to recreate Google's homepage functionality using Angular has been challenging for me. Despite watching Egghead videos and studying the API extensively, I couldn't find a specific example for this behavior. Here's what I aim to achiev ...

javascripthtmlangularjssingle-page-application

How can I determine if a user has reached the end of a non-scrollable div by utilizing HostListener and directives within Angular?

In my Angular project, I have designed a main layout using flex display with specific height and overflow settings. The main content div inside this layout has its own unique styling to ensure consistent appearance for any components inserted within it. By ...

htmlangularscrollangular2-directives

The issue of responsive spacing (such as mb-lg-2 mb-sm-3, etc) not functioning as expected has been identified in Bootstrap

Previously in Bootstrap 4, these classes were effective. However, I am finding that they are not functioning properly in Bootstrap 5. Any insights as to why this might be happening? Note: d-block d-lg-flex , text-center text-lg-start text-md-end seem to s ...

csstwitter-bootstrapbootstrap-5

"Challenges Arising in Deciphering a Basic JSON Array

After countless attempts, I am still struggling to solve this issue. My PHP code is functioning properly, as it returns the expected data when "Grove Bow" is selected from the dropdown menu: [{"wtype":"Grove Bow","was":"1.55","wcc":"5","wbdmin":"12","wbdm ...

phpjavascriptjqueryhtml

Can javascript be used to swap out the folder in my URL?

I have been searching for solutions on how to change the language of my website using jQuery, but so far I have not found anything that works for me. Let's take my website as an example: www.domain.com I have separate folders for different languages. ...

javascriptjqueryhtml