Creating a scrollable card layout specifically for small screens in HTML

I am looking to implement a horizontal scroll (for small screens only) within my card layout so that all cards are displayed in a single row. Here is an example:

For small screens: https://i.sstatic.net/5eWyV.png So far, I have added horizontal scrolling to the container-fluid (card layout), but the cards are appearing in a single row.

@media (max-width: 600px) {
  .container-fluid-flexbox {
        margin-top: 300px;
        margin-left: 0px;
        margin-right: 0px;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        width: 500px;
    }

    .card { 
        width: 10px;
        flex: 0 0 auto;
    }
}

@media (max-width: 800px) { 
    .container-fluid {
        margin-top: 350px;
        margin-left: 0px;
        margin-right: 0px;
    }

    .card { 
        display: inline-block;
        width: 100%;
       }
}

.container-fluid{
    margin-top: 100px;
    margin-left: 50px;
    margin-right: 50px;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

.card-reveal{
    color: #ffffff;
    background-color: rgba(0,0,0,0.7) !important;
}

div.card-reveal span.card-title{
    color: #ffffff !important;
}

.card {
   width: 280px;
   height: 360px;
   z-index: 5;
}


#card-img {
   height: 200px;
}
.card-content {
   margin-top: -17px;
   color: black;
}
.card-action {
   margin-top: 38px;
}  
.card-button {
   margin-left: -1px;
   margin-top: -7px; 
}
<div class="container-fluid" style="background-color: black">
    <div class="row"> 
        <div class="col xl3">
            <div class="card hover-reveal sticky-action z-depth-2">
                <div class="card-image waves-effect waves-block waves-light">
                    <img id="card-img" class="activator" src="http://images.media-allrecipes.com/userphotos/720x405/1889670.jpg">
                </div>
                <div class="card-content">
                    <p><a href="#">Card Title</a><i class="material-icons right">more_vert</i></p>            
                </div>

                <div class="card-action">
                    <a href="#!" id="card-parti" class="btn waves-effect waves-teal">VIEW</a>
                </div>

                <div class="card-reveal">
                    <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
                    <p>Here is some more information about this product that is only revealed once clicked on.</p>
                </div>
            </div>
        </div>

        <div class="col xl3">
            <div class="card hover-reveal sticky-action z-depth-2">
                <div class="card-image waves-effect waves-block waves-light">
                    <img id="card-img" class="activator" src="http://images.media-allrecipes.com/userphotos/720x405/1889670.jpg">
                </div>
                <div class="card-content">
                    <p><a href="#">Card Title</a><i class="material-icons right">more_vert</i></p>            
                </div>

                <div class="card-action">
                    <a href="#!" id="card-parti" class="btn waves-effect waves-teal">VIEW</a>
                </div>

                <div class="card-reveal">
                    <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
                    <p>Here is some more information about this product that is only revealed once clicked on.</p>
                </div>
            </div>
        </div>
    </div>
</div>

htmlcssscroll

Answer №1

Here is a straightforward example to demonstrate how flexbox can be utilized.

Recommendation for applying this to your current markup would involve cleaning it up slightly. For instance, the CSS class .container-fluid-flexbox exists but does not seem to be used in the HTML. Additionally, in your existing markup, the .row element should act as the flex container, with its child elements .col taking on the role of flex items.

.body {
  margin: 0;
  padding:10px;
}
.container {
  box-sizing:border-box;
  display:flex;
  flex-wrap:nowrap;
  box-sizing:border-box;
  width:100%;
  padding:10px 0;
  border:1px solid #000;
  overflow:auto;
}

.card {
  box-sizing:border-box;
  padding:10px;
  width: 200px;
  min-height: 300px;
  box-shadow: 0 1px 2px #000;
  flex-shrink: 0;
  background:#fff;
}

.card + .card {
  margin-left:10px;
}
<div class="container">
  <div class="card">
    Some card content 1
  </div>
  <div class="card">
    Some card content 2
  </div>
  <div class="card">
    Some card content 3
  </div>
  <div class="card">
    Some card content 4
  </div>
    <div class="card">
    Some card content 5
  </div>
    <div class="card">
    Some card content 6
  </div>
    <div class="card">
    Some card content 7
  </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

What is the reason behind the malfunction of the float?

Having an issue with the "1" form not extending to 100% width next to the "Tickets". Here is a visual representation of the problem: View how it currently looks here. html: <section id="main_content"> <div class="left inner"> ...

jqueryhtmlcss

MUI version 5 - Keep styling separate from component files

Seeking to segregate styling from component File in MUI v5. In the past, I accomplished this in v4 by utilizing makeStyles as shown below: Page.style.js: import { makeStyles } from "@material-ui/core"; export const useStyles = makeStyles({ ro ...

cssreactjsmaterial-ui

Switch between GeoJSON layers by using an HTML button within Mapbox GL JS, instead of relying on traditional links

I am currently developing a web map that requires toggling two GeoJSON layers on and off. In the past, I used Mapbox JS to accomplish this task by adding and removing layers with a custom HTML button click. However, I am facing some challenges in achieving ...

javascripthtmlcssmapbox-gl-jsmapbox-gl

Maintaining aspect ratio while resizing images: A foolproof guide

I've been working on image editing and encountered a bit of trouble with aspect ratios. <img src="big_image.jpg" width="900" height="600" alt="" /> As you can see, the height and width are already specifi ...

cssimageaspect-ratio

jQuery, the magical tool that can make forms disappear and reappear in a blink

As the heading suggests, here is the code I attempted. The forms are designed to be displayed one after the other, with each subsequent form's appearance being determined by the information provided in the previous forms. $(document).ready(function() ...

phpjqueryhtmlcss

The overflow hidden property in Tailwind CSS is not functioning properly during animations

I'm attempting to animate an image by moving it to different positions, but when it goes off the screen, the scrollbar appears. I tried adding overflow hidden to the parent element, but it didn't work as expected. Here is the relevant code snippe ...

htmlcssnext.jstailwind-css

Basic Timer with Visual Background

Struggling to find the right CSS/script for a straightforward countdown timer, Here are the requirements: Countdown in days only, no need for hours, minutes, and seconds Ability to use a custom image as background I've scoured online searches but n ...

javascriptcss

How do I incorporate pagination into a PL-SQL dynamic content table in Oracle Apex?

I've successfully created a PL-SQL dynamic content report in Oracle Apex, but I'm struggling with implementing pagination. With too many rows to display at once, adding pagination will greatly enhance the user experience. Here is a snippet of my ...

javascripthtmlcssplsqloracle-apex

Moving from the center to the bottom-right with a CSS transition

I have a specific requirement where I need the container to cover the entire page and shrink when clicked, with an animation. Currently, I am using CSS transition to animate the container shrinking towards the top: The container shrinks slowly to the sp ...

javascripthtmlcsscss-transitions

HTML and CSS: Aligning Text on the Left and Image on the Right - A Guide to Positioning Elements

Just starting out with HTML and CSS, I've run into some issues while writing my code. My goal is to have Text (on the left middle part) and image (on the right middle part) displayed side by side A responsive design that stacks the text on top of t ...

htmlcssresponsive

How to navigate to the "not now" button in Instagram notifications with Selenium and Python

I'm currently working on a custom "Instagram bot" to log in to Instagram. Although I've managed to bypass the login screen, I'm encountering an issue with a popup message that says: https://i.stack.imgur.com/OMA6h.png from selenium import we ...

pythonhtmlseleniumbotsweb-deployment

Adding URL path instead of overriding it

Could someone assist me with the dynamic routing while organizing pages in folders within Storyblok? Currently, I am facing an issue where the slug folder name is being appended to all the links displayed in the header. So, when a user clicks on a blog po ...

htmlvue.jsvuejs3nuxtjs3storyblok

Updating rows within a table dynamically using AJAX

I currently have a table with an empty body: <table id="tablem" border="1" width="100"> <thead> <tr> <th style="width: 10%">PageName</th> <th style="width: 5%">Lang</th> ...

htmlasp.netajaxhtml-table

Issue with loading HTML file correctly in Django

I have been attempting to integrate my Django app with an admin dashboard from a repository on GitHub. After successfully logging in, the app redirects to the dashboard, but only the HTML part loads and none of the fancy features are visible on the dashboa ...

javascriptpythonhtmlcssdjango

Enhance user experience by implementing a feature in AngularJS that highlights anchor

As I am in the process of developing a chat application using Angular, I have encountered an issue with switching between views. One view, named 'chat.html', displays the list of available users while another view, 'chatMessages.html', ...

javascripthtmlangularjs

A guide to adjusting the size of a mat-button using an svg mat-icon

I have PrimeNg and Angular Materials buttons on the same td. I am attempting to resize my mat-buttons to match the size of my pButtons but they are not adjusting properly. Should I consider using a different type of button with my icon? HTML <button ma ...

htmlcssangular

Subpar resolution of PNG images displayed in HTML canvas

My attempt to draw a PNG image onto the canvas is resulting in poor quality. I am using the drawImage method as shown below: src = folder+self.cur+".png"; imageObj.src = src; imageObj.onload = function() { context.clearRect(0, 0, cv, ch), context.drawImag ...

javascripthtmlcanvaspngdrawimage

Troubleshooting PHP password change functionality issue

I'm having trouble with my code and need some help identifying the issue. The problem I'm facing is that when I try to set a new password, it doesn't seem to save in my database and I can't log in with the new password. Here's the ...

phphtml

The ng-repeat directive in my Angular app's div element is being displayed as a comment

After spending several days searching, I have yet to find a solution for my issue. It seems to be specific to the code I'm working with in Angular 1.6. I apologize for the format of my post, as this is my first time seeking help on stack overflow ...

htmlangularjsangularjs-ng-repeat

Jquery spinner overlay for enhanced loading experience

Currently, I am incorporating jQuery/Ajax in my project and wanted to include a spinner when an ajax request is made. The specific scenario involves two tabs on the UI: Home and Activities. When the user clicks on the Activities tab, an ajax request is sen ...

javascriptjqueryajaxhtml