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

Preventing Height Stretch in CSS Flex-Wrap: A Guide

Is there a way to eliminate the large gaps between box3, box1 and box4, box6? How can we ensure each box adjusts its height dynamically? .wrap { display: flex; align-items: baseline; align-content:flex-start; justify-content: space-between; fl ...

cssflexbox

What is the best way to align three images horizontally using bootstrap?

While working on my JavaScript class and creating one-page web apps, I had the idea to create a central hub to store and link them all together. Similar to Android or iOS layouts, I designed a page with icons that serve as links to each app. I managed to ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Side-to-Side Bootstrap Display Panel

I have been attempting to customize a Bootstrap panel to create a horizontal version, but I am struggling to align the panel heading vertically with the content in the panel body. I believe it may be related to clearing the divs. Front-end development is ...

htmlcsstwitter-bootstrap-3

Completing a submission on a bootstrap form, using innerHTML and displaying an alert

I am currently having an issue with navigating to the home page after submitting a form in Bootstrap. Although I have successfully implemented an alert message upon submission, the page does not redirect to the home page as expected. Instead, it redirects ...

javascripthtml

Adjust the width of the table by utilizing the border-collapse property set to collapse

I am completely baffled by this situation. Whenever I adjust the border-width of a table (either dynamically with JavaScript or in Chrome Dev Tools) where border-collapse: collapse; is set, transitioning from a border width of 1px (#1) to a larger value (# ...

htmlcsshtml-tableborder

Error with setting innerHTML property of a null nested div

This issue arises when the element is referenced before the DOM has completely loaded. To combat this, I have ensured that the necessary script runs only after the window has finished loading. Interestingly, if the getElementById() call is for a standalon ...

javascripthtml

What is the best way to style only textboxes with CSS without affecting other input types such as checkboxes?

If attribute selectors were universally supported by all browsers, we could effortlessly implement the following styling: input[type='text'] { font:bold 0.8em 'courier new',courier,monospace; } input[type='radio'] { margin:0 ...

asp.netcss

I have come to realize that in my creation, my method does not function flawlessly as

I'm currently experimenting with creating a simple code using vue.js and d3.js. The goal is to plot some charts within the code, so I am attempting to allocate space for the charts by defining a method('add_svg') and executing the method in ...

cssnode.jsvue.jsd3.js

What are your thoughts on using image maps with CSS?

My images are also links, and the code looks like this: <a href="../www.google.com"><img src="pages/squirrely.png" /></a> While they function properly as links, I want them to only be clickable if you click on the central part of the im ...

htmlcssimagehyperlinkimagemap

Creating dynamic transformations and animations for characters and words within a paragraph in 3D

Looking to add animation effects to specific parts of a paragraph, but transforming the entire box instead. Remembering seeing a solution on StackOverflow before, now regretting not saving it. Spent over an hour searching for a similar answer without succ ...

javascripthtmlcss

Is there a way for me to extract and showcase the initial 10 items bearing a particular class name from a different html document on my homepage?

I am looking to extract a list of movies from an HTML file titled "movies.html". The structure of the file is as follows: <div class="movie">Content 1</div> <div class="movie">Content 2</div> <div class=" ...

javascripthtml

I'm having trouble with Gutters GX and GY not functioning properly in Bootstrap, HTML, and CSS

I attempted to incorporate gutters into my Bootstrap grid layout, however, they are not showing up as expected. I am following the guidelines provided on the Bootstrap documentation, but for some reason, the gutters are not appearing. <!DOCTYPE html> ...

htmlcssbootstrap-5

I am looking to add some flair to my ID "checkimg" using JavaScript

JavaScript if ((valid1 && valid2 && valid3 & valid4 && valid5 && valid6 && valid7 && valid8)==1) { // include an image in the specified ID. document.formElem.next1.disabled=false; } else { docume ...

javascriptjqueryhtmlcss

Looking to implement a scroll bar in your PhoneGap mobile app for Android?

Encountering an issue with my Android PhoneGap mobile website application. I have implemented a scroll bar in the application which works perfectly on PC. However, when testing on an Android device (mobile phone), the scroll bar does not enable. ...

androidjqueryhtmlcsscordova

The alignment issue persists in HTML/CSS despite troubleshooting efforts

I am facing a challenge while attempting to center text within a modal window, despite my efforts the text remains uncentered. This is my HTML code: <div ng-init="modalCompassDir()"> <div class="myModal"> <img class='floor ...

javascripthtmlcss

Ways to evaluate the amount of traffic on a webpage?

Recently, I encountered an issue while creating a page to showcase blog posts. Each post had the typical social media share buttons like "Facebook like," "tweet this post," and "+1." Additionally, there were some extra JavaScript functions added for variou ...

javascripthtmldebugging

Chrome Extension to Emphasize Every Word

As a novice, I am embarking on the journey of creating my own chrome extension. The idea is to design a popup.html file that showcases a "highlight" button. The functionality would involve clicking this button to highlight all words on the page. Here&apos ...

javascripthtmlgoogle-chromegoogle-chrome-extension

The width of the HTML page seems to adjust or shift when I click on

I'm encountering an issue with my navbar. Whenever I open the dropdown menu, the width of my page changes but returns to normal when it is closed. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="styl ...

htmlcsstwitter-bootstrapbootstrap-4

How can I adjust the size of my elements to be responsive in pixels

While browsing through Quora and Facebook feeds, I noticed the fixed size of user display pictures: width: 40px; height: 40px; Even when resizing the browser window for a responsive design, these pictures maintain their size at 40px x 40px. What other f ...

cssresponsive-design

Why does it appear that Angular is undefined in this straightforward Angular demonstration?

I'm completely new to AngularJS and I've encountered an issue. Yesterday, I ran a very simple AngularJS application that I downloaded from a tutorial and it worked perfectly. The application consists of 2 files: 1) index.htm: <!DOCTYPE htm ...

javascripthtmlangularjsangularjs-scope