Using CSS for creating a responsive design

My goal is to create a responsive design, but I am encountering an issue where reducing the window size causes elements to go off-screen.

<h5>User Stories</h5><div class="stories-list d-flex "><div class="position-relative"><img src="https://example.com/image1.jpg" alt="story"><!----><a href="https://example.com/image1.jpg" target="_self" class="story-hover"><p>Download</p></a><!----><!----><!----></div>

...


    .stories-list>div {
    height: 220px;
    width: 125px;
    margin: 0 5px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,.2);
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    cursor: pointer;
    overflow: hidden;
}
...

Link to CodePen

I aim to achieve a layout similar to:

On PC

Where the content automatically shifts to a new line on smaller screens

This is the desired outcome for the image in the codepen example, aiming for a responsive design with content moving to a new line as needed.

htmlcssresponsive-design

Answer №1

Are you looking for this?

To achieve the desired effect, include flex-wrap:wrap; in your CSS:

.d-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap:wrap;
}

By adding this property, items will automatically move to the next line when there is limited space available.

.stories-list>div {
  height: 220px;
  width: 125px;
  margin: 0 5px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, .2);
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  cursor: pointer;
  overflow: hidden;
}

div {
  display: block;
}

.flex-column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.position-relative {
  position: relative;
}

.stories-list>div>img {
  height: auto;
  width: 100%;
}

.d-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap:wrap;
}

.story-hover,
.story-hover>p {
  position: absolute;
  left: 0;
  right: 0;
}

.story-hover {
  background-color: rgba(0, 0, 0, .4);
  top: 0;
  bottom: 0;
  display: none;
  border-radius: 8px;
}

.stories-list>div:hover>.story-hover {
  display: block;
}

.story-hover>p {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  bottom: 15px;
  text-align: center;
}
<h5>User Stories</h5>
<div class="stories-list d-flex ">
  <div class="position-relative"><img src="https://scontent-ams3-1.cdninstagram.com/vp/578e883ef475d1232ce59936563bbe4e/5B726BC1/t51.12442-15/sh0.08/e35/p640x640/38035134_221249845233474_6747640763024146432_n.jpg" alt="story">
    <a href="https://scontent-ams3-1.cdninstagram.com/vp/ff89a52784b070742b3a20a8e66fee65/5B726D26/t51.12442-15/e35/38035134_221249845233474_6747640763024146432_n.jpg" target="_self" class="story-hover">
      <p>Download</p>
    </a>
  </div>


  <div class="position-relative"><img src="https://scontent-ams3-1.cdninstagram.com/vp/7f73c9a2e9e023cb992050eed84c800b/5B729C5D/t51.12442-15/sh0.08/e35/p640x640/37970915_275334373066916_3183150178899066880_n.jpg" alt="story">
    <a href="https://scontent-ams3-1.cdninstagram.com/vp/b7876d21a14741ec0d4d33e459edd77b/5B7368FA/t51.12442-15/e35/37970915_275334373066916_3183150178899066880_n.jpg" target="_self" class="story-hover">
      <p>Download</p>
    </a>
  </div>

  <!-- Repeat similar code blocks for other images -->

</div>

Answer №2

If your goal is to fit as many <div> elements as possible onto one line, but allow them to reflow onto multiple lines if necessary, the simplest approach might be to apply the display: inline-block style (similar to how an <img> element is rendered, like a large text character).

(I removed the 'flex' component as a basic reflow works fine without it).

.stories-list>div {
    height: 220px;
    width: 125px;
    margin: 0 5px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,.2);
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    cursor: pointer;
    overflow: hidden;
}
div {
    display: block;
}
.position-relative {
    position: relative;
    display: inline-block;
}
.stories-list>div>img {
    height: auto;
    width: 100%;
}
.story-hover, .story-hover>p {
    position: absolute;
    left: 0;
    right: 0;
}
.story-hover {
    background-color: rgba(0,0,0,.4);
    top: 0;
    bottom: 0;
    display: none;
    border-radius: 8px;
}
.stories-list>div:hover>.story-hover {
    display: block;
}
.story-hover>p {
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    bottom: 15px;
    text-align: center;
}
<h5>User Stories</h5><div class="stories-list"><div class="position-relative"><img src="https://scontent-ams3-1.cdninstagram.com/vp/578e883ef475d1232ce59936563bbe4e/5B726BC1/t51.12442-15/sh0.08/e35/p640x640/38035134_221249845233474_6747640763024146432_n.jpg" alt="story"><!----><a href="https://scontent-ams3-1.cdninstagram.com/vp/ff89a52784b070742b3a20a8e66fee65/5B726D26/t51.12442-15/e35/38035134_221249845233474_6747640763024146432_n.jpg" target="_self" class="story-hover"><p>Download</p></a><!----><!----><!----></div>


  <div class="position-relative"><img src="https://scontent-ams3-1.cdninstagram.com/vp/7f73c9a2e9e023cb992050eed84c800b/5B729C5D/t51.12442-15/sh0.08/e35/p640x640/37970915_275334373066916_3183150178899066880_n.jpg" alt="story"><!----><a href="https://scontent-ams3-1.cdninstagram.com/vp/b7876d21a14741ec0d4d33e459edd77b/5B7368FA/t51.12442-15/e35/37970915_275334373066916_3183150178899066880_n.jpg" target="_self" class="story-hover"><p>Download</p></a><!----><!----><!----></div>


  <div class="position-relative"><img src="https://scontent-ams3-1.cdninstagram.com/vp/578e883ef475d1232ce59936563bbe4e/5B726BC1/t51.12442-15/sh0.08/e35/p640x640/38035134_221249845233474_6747640763024146432_n.jpg" alt="story"><!----><a href="https://scontent-ams3-1.cdninstagram.com/vp/ff89a52784b070742b3a20a8e66fee65/5B726D26/t51.12442-15/e35/38035134_221249845233474_6747640763024146432_n.jpg" target="_self" class="story-hover"><p>Download</p></a><!----><!----><!----></div>


  <div class="position-relative"><img src="https://scontent-ams3-1.cdninstagram.com/vp/7f73c9a2e9e023cb992050eed84c800b/5B729C5D/t51.12442-15/sh0.08/e35/p640x640/37970915_275334373066916_3183150178899066880_n.jpg" alt="story"><!----><a href="https://scontent-ams3-1.cdninstagram.com/vp/b7876d21a14741ec0d4d33e459edd77b/5B7368FA/t51.12442-15/e35/37970915_275334373066916_3183150178899066880_n.jpg" target="_self" class="story-hover"><p>Download</p></a><!----><!----><!----></div>


  <div class="position-relative"><img src="https://scontent-ams3-1.cdninstagram.com/vp/578e883ef475d1232ce59936563bbe4e/5B726BC1/t51.12442-15/sh0.08/e35/p640x640/38035134_221249845233474_6747640763024146432_n.jpg" alt="story"><!----><a href="https://scontent-ams3-1.cdninstagram.com/vp/ff89a52784b070742b3a20a8e66fee65/5B726D26/t51.12442-15/e35/38035134_221249845233474_6747640763024146432_n.jpg" target="_self" class="story-hover"><p>Download</p></a><!----><!----><!----></div>


  <div class="position-relative"><img src="https://scontent-ams3-1.cdninstagram.com/vp/7f73c9a2e9e023cb992050eed84c800b/5B729C5D/t51.12442-15/sh0.08/e35/p640x640/37970915_275334373066916_3183150178899066880_n.jpg" alt="story"><!----><a href="https://scontent-ams3-1.cdninstagram.com/vp/b7876d21a14741ec0d4d33e459edd77b/5B7368FA/t51.12442-15/e35/37970915_275334373066916_3183150178899066880_n.jpg" target="_self" class="story-hover"><p>Download</p></a><!----><!----><!----></div>
</div>

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

Utilizing a function within a span element

Can anyone help me figure out what I'm doing wrong while trying to toggle between a span and an input text field using the on function? If you want to take a look, I've created a fiddle for it here User Interface <div> <span >My va ...

javascriptjqueryhtml

Utilizing jQuery to attach events to dynamically generated elements

I have a scenario where I am uploading multiple images and inserting them into specific div elements. These divs should toggle a class when clicked. Should I include the part of code that adds the onclick event inside the ajax success function? Your help i ...

javascriptjqueryhtmlajax

Text scrolls - items are shown all at once

I've been experimenting with creating moving/scrolling text. After some trial and error, I've managed to achieve this effect. If you're interested, you can check out the code on CODEPEN. The issue that's currently bothering me is rel ...

htmlcsstextscrollmove

Maximizing the height of a flex container

Two flex containers are utilized: one for the navigation bar and the other for the page content. To make the content occupy the entire height of the page, the container's height was set to 100vh. However, a challenge arose when the navigation bar&apo ...

htmlcssflexbox

Creating a clickable link for every identifier

I am trying to create a sidebar navigation for my HTML page that contains multiple elements with unique id attributes. Is there a way to generate bookmark links for each id in a separate location instead of placing them next to the elements? Alternatively ...

javascriptphphtmlanchor

Automated JavaScript pop-up without the need for a button click

Is it possible to trigger a JavaScript message without using a mouse click? For example: <?php if(a == b) { Then automatically display something } I've searched around but can't find anything. Also, how do people create stylish popups th ...

phpjavascripthtmlajax

Even after applying the CSS property "resize:none" to my HTML textarea, I still find it to be adjustable in size when viewed in the Opera browser

I'm currently working on customizing my HTML page and I want to ensure that all text inputs are consistent in size. I attempted to use the text-area selector in CSS, but it didn't seem to work correctly in Opera. The resize handle disappeared in ...

csshtmlthymeleaf

Create spacing on the right side of a div with Bootstrap 4 offset, instead of the typical left side offset

Looking for a solution in Bootstrap 4 that mirrors the offset feature in Bootstrap 3, but pushes a div to the left instead of right. Need a way to have multiple dynamic divs within a row, where one div is pushed to the left on its own row without the nee ...

htmlcssbootstrap-4

Is there a way in CSS to apply multiple colors to individual letters within a word?

Is it possible to add random colors to every pixel of a letter or multiple colors to a letter using CSS? Check out this example. ...

csshtml

Automatic line breaks in MathJax when displayed in a modal dialogue box

As part of a math project, I need to display the solution of a problem in a Sweetalert2 modal. However, despite using the following code: <script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$ ...

javascripthtmlcssmathjaxsweetalert2

Using the CSS property display:none within a PHP email template can be a clever way to

Currently, I am developing a PHP HTML email template where I need to hide a table row when a PHP condition is met. Can anyone provide guidance on how to script this? I am using the following method: this is my code below: <tr style=""'. ...

phphtmlcss

Button alignment vertically is not functioning

Here is a snippet of HTML code: <header> <div class='content'> <div class='pull-left'> <h1>Hello World</h1> <h2>Lorem ipsum</h2> </div> <div class ...

htmlcss

The image is exceeding the boundaries of its parent element, even though a height has been specified

I need assistance with aligning an image inside a div that should take the height of its parent div, specifically the .hero class. Despite setting the image's height to 100%, it still extends beyond the parent div and doesn't adhere to the specif ...

css

Using Jquery to create a fading effect when changing the color by checking a checkbox

I'm struggling with adding a fading effect to change the background color of the body element when a checkbox is checked. The color changes successfully, but I can't figure out how to make it fade smoothly. Here is the HTML code: <div class=& ...

javascripthtmljquerycss

Is there a way to update the input box value with a variable using jquery?

I am currently facing an issue with changing the value attribute of an input box in a form using jquery. Although I am able to change the value, it does not reflect in the outer html. Below is my current code snippet: $("a").click(function(event) { va ...

javascriptjqueryhtmlforms

Show or Hide a Div with Responsive Design

Exploring responsive layouts is a new adventure for me. Most things seem to be falling into place, except for one challenge: I am struggling to show divs with the property 'display: none;' when switching it to 'display: block;' in my me ...

cssresponsive-design

What techniques does DeviantArt use to adapt and adjust the content displayed on a page based on the width of the user's

Visit and observe the functionality where new content appears as you widen your browser window. The alignment of the content in the center is a key aspect of this design on DeviantArt's website. How is this achieved? I attempted to create a div with ...

jquerycssajax

Ways to update a JavaScript variable without needing to refresh the entire webpage

I am working on a Three.JS application where objects are colored based on values from a text file: let color1 = 0x00ff00; let color2 = 0xFF04F0; Within the Three.JS code: var cubeGeometry = new THREE.BoxGeometry(15, 1, 5); var cubeMaterial = new THREE.M ...

javascripthtmlthree.js

The jquery.blockUI plugin seems to be malfunctioning

Trying to disable a simple div: <div id="MyDiv"> </div> Here is the code I used: $('#MyDiv').blockUI({ message: '<h1>This has been blocked!</h1>', css: { border: '3px solid #a00' } }); Issue ...

jqueryjquery-uihtmljquery-pluginsjquery-blockui

Choosing the subsequent div after the current one using Jquery

I am currently in the process of creating a drop-down menu button that, when clicked, reveals the previously hidden div underneath it. The code is functioning properly without the use of $(this).next, but it is displaying all divs with the class .menudrop ...

javascriptjqueryhtmlcss