Creating a card design that responds to user interactions using CSS and HTML

I attempted to create a responsive queue of playing cards that adjusts based on the display width.

I want this queue to perfectly fit the display width so that no card is cut off. It should be optimized for phones, tablets, and desktop screens.

Additionally, I prefer to center align this queue to ensure it looks visually appealing.

Check out the live demo on jsfiddle

<div> 
    <img src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt="">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt="">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt="">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt="">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt="">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt="">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt="">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt="">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt="">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt="">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt="">
    <img class="rest" src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" alt="">
</div>

div{
    width:100%;
}
img{
    display: inline-block;
    height: 200px;
}
.rest{
    margin-left: -102px;
}
htmlcssresponsive-design

Answer №1

Implementing the new Flexbox layout is a great solution!

To achieve this, remember to use display:inline-flex for your wrapping div and remove display:inline-block from the img:

div{
    width:100%;
    display:inline-flex;
}
img{
    height: 200px;
}
.rest{
    margin-left: -102px;
    /*flex-grow:1;*/          /* Bonus : all available width is occupied */
}

The use of flex-grow:1 allows the img to expand when there is space available, although it may cause distortion.

Check out this demo, as well as some helpful resources:

Answer №2

If you're looking to enhance browser compatibility, try implementing it this particular method

  • Ensure all your cards are labeled with class="rest"
  • Adjust your CSS accordingly:
div{
    width:100%;
    text-align:center;     /* Center alignment */
    padding-right:102px;   /* Adjusting right padding */
    box-sizing:border-box; /* Include padding in width calculation */
}
img{
    display: inline-block;
    height: 200px;
}
.rest{
    margin-right: -102px; /* Utilizing margin-right over margin-left */
}

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 could be causing this issue with the jQuery CSS not functioning properly?

When I come across the following HTML snippet: <div id="map"> <div class="elem"> hey1 </div> <div class="elem"> hey2 </div> <div class="elem"> hey3 </div> </div> In JavaScript: va ...

jquerycss

Having trouble understanding why the other parts of my header are not displaying

<head> This special function runs when the webpage is loaded. <body onload="myOnload()"> A distinctive div at the top with a unique graphic <div id="header"> <img src="resumeheader.png" alt="Header" style="width:750px;h ...

javascripthtmlheaderappendchild

Different techniques for using percentages in CSS transformations to create dynamic animations for DOM element translations

I have 14 objects positioned across the dom that I need to animate using the translate property. Currently, I am using transform: translate(x%, y%) for each object, requiring me to calculate the translation amount and apply a CSS style individually. This m ...

javascripthtmlcss

How come this particular design is being passed down from a predecessor (and not a direct parent) div?

Web development can be frustrating at times. Hopefully, someone out there can shed some light on this issue and offer a solution. You can view the HTML/CSS code below or check out this example on JSFiddle The problem arises when I have a header div and a ...

htmlcss

What is the best method for locating the innermost element of an HTML tree that has a specific class assigned

I am working on a project that involves a menu system. One of the features I am implementing is that when a tree within the menu is opened, it receives the "active" class. My goal now is to dynamically retrieve the deepest sub-menu within this structure ...

javascriptjqueryhtml

Create a pair of divs on your webpage that users can drag around using HTML5

Hello to all HTML5 developers! I am currently facing an issue where I am attempting to designate two separate divs as dragable areas for incoming files. Unfortunately, it seems that only one of them can be active at a time. How can I adjust my code so th ...

javascripthtmldojo

Reveal Visual Content upon Hovering

Is there a way to show an image only when the mouse hovers over it? Additionally, can we underline the adjacent text at the same time? If the mouse moves away from the image, I'd like it to hide again and revert the text back to its original state. T ...

javascriptjqueryhtmlcssmouseover

Unexpectedly, the jQuery get function retrieves the entire webpage

I'm encountering difficulties when using .get requests to update elements through page load or button press. Here is the code snippet... $(document).ready(function() { //updateVariable(); $('#dannychoolink').html('<?php dan ...

jqueryhtmlajaxget

When interacting with Chrome, the div gets automatically blurred upon being clicked

While working on the development of our website, we stumbled upon something peculiar. We have a set of divs displayed on the screen, resembling the layout of Pinterest. Upon clicking any of these divs, the content within that particular div is loaded into ...

jqueryhtmlcssgoogle-chrome

Prevent background image animation in CSS

I've encountered an issue with a simple button I created that uses two background images for normal and hover states. Upon testing in various browsers, I noticed that the images animate on hover, causing them to slide up and down. I tried eliminating ...

csscss-transitions

NodeJS is facing a severe challenge in properly rendering HTML and its accompanying CSS code, causing a major

Once upon a time, I built a beautiful website while practicing HTML, CSS, and JS. It had multiple web pages and used Express for the backend. Unfortunately, I lost all the files associated with it and took a break from web programming for some time. Now, w ...

javascripthtmlcssnode.jsexpress

Help needed with CSS menu dropdown problem

Hello everyone, I am currently working on creating a menu for the top navigation of my website. My goal is to have a list of items appear below the menu when hovering over it with the mouse. Right now, I am testing this on a local HTML file before impleme ...

htmlcss

What causes Font Awesome 5 icons to vanish when changing the font-family?

I am facing an issue with the code I have below. It changes the font style successfully, but it also causes the icon to disappear. Can anyone provide tips on how to ensure that the icon remains visible while changing the font style? <link rel="styles ...

cssfont-awesomefont-awesome-5

Scraping Information on Pokemon from the Web

I am currently researching the number of moves each Pokemon from the first generation could learn. After some exploration, I came across a helpful website that provides this information: The website lists 151 Pokemon, and for each of them, their move set ...

htmlrweb-scraping

Adjusting an image size using JQuery after resizing a canvas will only resize the image itself, not

How can I resize an image within a canvas using JQuery in a way that only the image is resized, not the entire canvas? function resizeImage(width, height){ var image = document.getElementById('resizeImage'), canvas = document.createEleme ...

javascriptjqueryhtmlcsscanvas

Utilizing Font Awesome icons within a JSON structure

I'm running into a bit of trouble trying to display font awesome icons. The text is written in json using a rakefile, and I'm attempting to insert a font awesome icon within the text. However, I'm facing difficulties because the text is in j ...

cssruby-on-railsjsonangularjs

Having trouble getting PostCSS nesting to work with CSS variables in Tailwind CSS and Next.js?

I've been attempting to utilize PostCSS nesting alongside CSS variables, but unfortunately the CSS variables are not being converted at all. Instead, I am seeing Invalid property value in the DOM for CSS Variables. The tailwind.css file I have inclu ...

cssnext.jstailwind-csspostcsscss-variables

CSS animation - gradual disappearance on mouse exit

Hey everyone, I'm in need of some assistance with my animation. I've created a button that moves right and left in a loop, but I'm encountering an issue when the mouse moves away from the button. The transition is not smooth and it jumps bac ...

htmlcssloopsanimationtransform

Can someone provide guidance on utilizing parentheses in HTML code?

I am facing an issue in my Angular project while using the WordPress API. The problem lies in the API address structure which includes "" like this: <img src="{{importantvideo.better_featured_image.media_details.sizes.["covernews-med ...

htmlangular

div within a fixed width container with 100% width inside

Is there a way to ensure that div B has a width of 100% when nested inside Div A, which already has a fixed width? .divA{width:600px; margin:0 auto;} .divB{width:100%; height:20px; background-color:black} .filler{height:800px; background-color:grey} ...

jqueryhtmlcss