Utilize CSS scrolling to present all items in a single line

Looking to showcase images in a horizontal line with scroll functionality? Unsure of how to achieve this and would really appreciate some guidance.

CSS

.img {
  max-width: 400px;
  position: relative;
}

.animal {
  float: left;
  background-color: #fff;
  
}

.image-grid{
 flex-wrap: wrap;
  width: 1400px;
  margin: 0 auto;
}

.pet-photo {
 padding: 10px;
  display: block;
  box-sizing: border-box;
  flex-basis: 100%;
  float: left;
  padding: 20px;
  width: 200px;
  height: 300px;
  display: block;
}

js

<div class ="image-grid">
   <div class="animal">
   
    <img class="pet-photo " src="${pet.photo}" >
      
       <div class="olay" onclick="location.href='${pet.href}';" style="cursor: pointer;">
       <div id="mydiv">
  
      <h2 class="pet-name">${pet.name}
      
      <h1 class="species">${pet.species}
      
      </div>
       <div></div></div>
      </div>
   </div>

Thank you for taking the time to read this, it's greatly appreciated :)

css

Answer №1

The solution involves using display: flex; along with flex-wrap: nowrap;

.container-items {
  overflow: auto;
  width: 100%;
}
.items {
  display: flex;
  flex-wrap: nowrap;
}
.items .item {
  min-width: 150px;
  text-align: center;
  padding: 5px;
}
.items .item h2,
.items .item h3 {
  margin: 0;
}
.items .item img {
  width: 100%;
}
<div class ="container-items">
  <div class ="items">
     <div class="item">
        <img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
        <h2>here title</h2>
        <h3 class="species">here text</h3>
     </div>

     <div class="item">
        <img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
        <h2>here title</h2>
        <h3>here text</h3>
     </div>

     <div class="item">
        <img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
        <h2>here title</h2>
        <h3 class="species">here text</h3>
     </div>

     <div class="item">
    ... (more items like this)

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

Pair objects that possess a specific attribute

I have a HTML snippet that I want to modify by adding the CSS class HideEdit to hide specific columns. <th class="rgHeader" style="text-align: left;" scope="col" _events="[object Object]" control="[object Object]" UniqueName="Edit"> This particular ...

jqueryhtmlcss.nettelerik

Arranging inline-flex elements within a div container

I have been struggling to position two elements side by side within a single div, where the second element should be on the right side. <div className={classes.container}> <div className={classes.first}> First </div> <d ...

cssflexboxmaterial-ui

Troubles with Angular elements not aligning correctly when using the "display: block" property

When using an angular element for a directive with "display: block", it may not automatically take up 100% of the width of the parent container. In order to ensure that it does, the width must be explicitly set to "100%" in the CSS. Despite setting "width: ...

javascripthtmlcssangularjs

What are the steps to implementing PNG masking using PixiJS?

I am currently working on incorporating a png sprite as a mask for another layer. I found a demo on the pixi.js official website and created this fiddle: https://jsfiddle.net/raphadko/ukc1rwrc/ The code snippet below is what I am using for the masking fu ...

javascriptcsspixi.js

What impact does the use of CSS in emails have on various email clients and reading formats?

As I delve into customizing my very first (woocommerce) email template, I am considering the option of concealing data using CSS display: none. However, a few questions arise regarding the compatibility and support of CSS and display: none: Do all email ...

htmlcssemailhtml-email

Creating a navbar dropdown that is clickable on mobile devices and opens on hover on desktop is a simple way to improve

Utilizing Bootstrap 5 for my website creation, I am facing an issue with the navbar dropdown functionality. On mobile devices, the dropdown opens upon clicking but fails to close when clicked again. Meanwhile, on desktops, hovering over the dropdown works ...

htmlcssfrontendnavbarbootstrap-5

Creating a CSS class in a separate file for an element in Angular 4

Looking for some help with my code setup. Here's what I have: <div class="over"> Content </div> In my component file, this is what it looks like: @Component({ selector: 'app', templateUrl: './app.componen ...

cssangular

When hovering, apply style 1 to all elements with the same id, and style 2 to the hovered element

I'm working with some user-generated divs that I want to dynamically highlight when hovered over, while simultaneously blurring the other divs. My challenge is figuring out how to change the style of the hovered div separately from all the others. Th ...

javascriptcss

I attempted to initiate a transition using JavaScript, but unfortunately it failed to execute

Hey there! I'm just starting out with HTML, CSS, and JavaScript, and I've been trying to make a transition work using JavaScript. The element I'm working with is a "menu-icon" which is a span tag with a small image nested inside another div ...

javascriptcsscss-transitionstransform

What is the best way to ensure that third tier menus open in line with their respective items?

Check out this fiddle link: http://jsfiddle.net/Wss5A/72/ Focusing on the following: 2-A-1 2-A-2 2-A-3 The third-tier menu is currently displayed starting from the top left corner. I want the first submenu element to be aligned with either 2-A-1, 2-A- ...

htmlcss

Adjust ChartJS yAxes "tick marks"

I'm having trouble adjusting the scales on my yAxes and all the information I find seems to be outdated. My goal is to set my yAxes range from 0 to 100 with steps of 25. Check out this link yAxes: [ { ...

javascripthtmlcsschart.js

Adjust the HTML 5 range slider to update according to the selected value

Is it possible to create a custom marker on an HTML5 range input element? I'm looking for a way to change the design of the circle marker as it moves along the scale from 1 to 10. Specifically, I want to change the color of the marker based on its po ...

javascriptjqueryhtmlcssrange

Enclosing two smaller boxes within a larger box

I'm attempting to replicate the layout shown in the desired.png file (specifically with an outer box surrounding two inner boxes). Currently, my code doesn't display the expected outer box around the two inner boxes. How can I modify it to achie ...

htmlcss

Tips on aligning multiple elements vertically in a justified manner

I'm struggling to articulate what I need, but I'll give it a shot. I want to vertically align three different elements, each wrapped in their own divs. This is my current code: .service_info { margin-top: 45px; clear: both; ...

htmlcssalignmentvertical-alignmentvertical-text

Transforming the appearance of the menu element in Vue using transitions

In my Vue app, I have this SCSS code that I'm using to create a smooth transition effect from the left for a menu when the isVisible property is set to true. However, I am encountering an issue where the transition defined does not apply and the menu ...

javascripthtmlcssvue.js

Swap the text within the curly braces with the div element containing the specified text

I have an input and a textarea. Using Vue, I am currently setting the textarea's text to match what's in the input field. However, now I want to be able to change the color of specific text by typing something like {#123123}text{/#}. At this poin ...

javascripthtmlcssvue.js

Chrome does not support gradient, while Firefox does

When I attempt to utilize the webkit gradient tag specifically for Chrome, it fails to function altogether. On the other hand, when tested on Firefox using background:-moz-linear-gradient(#000, #888);, it operates smoothly. Despite this, applying backgrou ...

htmlcssfirefoxgoogle-chrome

Tap and conceal feature on a mobile website

I seem to be facing a JavaScript challenge. On the desktop version of my website, I've managed to create a functionality where hovering over a button reveals some text, and clicking anywhere else on the site hides the text. However, I'm now stru ...

javascriptjquerycss

Adding a background image in javascript using data from a MySQL database

My current tech stack includes CodeIgniter, vanilla JavaScript, AJAX, CSS, and MySQL. I am trying to figure out how to set the background of an image that is stored in a MySQL database. While the following code is error-free and working perfectly, my cha ...

javascriptphpcssajaxcodeigniter

Attempting to create a single function that can be utilized with numerous divs that share the same class in jQuery

Currently, I am working on creating a basic jquery gallery viewer. In my code, I have the following structure: <div class="photoset"> <img /> <img /> </div> <div class="photoset"> <img /> <img /> <i ...

javascriptjqueryhtmlcss