Two rows of images with a horizontal scroll bar

Looking to create a grid of images where each image is displayed side by side. The goal is to have a fixed width and height for the container, with a horizontal scrollbar appearing if there are 12 or more images in the grid. Additionally, any overflow images should be pushed to the right instead of creating a new line below. Currently, all images are spilling over onto a third line.

Here's the CSS for my container:

  text-align: left;
  white-space: normal;
  height: auto;
  overflow-x: scroll;

This is how I am styling the images within the container:

  display: inline-block;
  width: 100px;
  margin-right: 17px;
  cursor: pointer;
  -webkit-box-shadow: 0px 7px 17px -6px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 7px 17px -6px rgba(0,0,0,0.2);
  box-shadow: 0px 7px 17px -6px rgba(0,0,0,0.2);

You can view an example of what I'm trying to achieve here: https://i.sstatic.net/K6E5b.png

Answer №1

To solve this issue, I utilized javaScript to identify the middle element within the awards section and then added a line break after it.

let totalAwards = $('.b-awards .e-award').length;
$('.b-awards .e-award').eq(totalAwards/2-1).after( "<div class='e-award__break-line' style=\"content: '\\A' \"></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

Leveraging font awesome ttf in conjunction with scss

I am currently attempting to incorporate Font Awesome with SCSS. @font-face { font-family: 'awesome'; src: url('../../fonts/font-awesome/fa-light-300.ttf') format('ttf'); } Although the path appears to be correct, I am ...

What is the best way to bring in an image when the resolution falls below 700 pixels?

Is there a way to import an image only if the screen resolution is greater than 700px? HTML: <picture> <img id="logo_mobile"> <!-- I have also tried this --> <source srcset="logomobile.jpg ...

The SharePoint 2010 standard model dialogs seamlessly blend transparent printing with the background content

When using Sharepoint 2010, each list item you edit will open in a new modal dialog box by default. This dialog box appears as a new div with the class of ms-dlgContent. It also creates a div with the class of ms-dlgOverlay which acts as a grey overlay di ...

Is there a way to link two HTML files containing jQuery within an HTML index file?

I'm currently working on creating an index page for a pair of HTML files that utilize jquery. Let's break down the structure of these files: Emps1, Emps2: These are two HTML tables that start off empty. TabA_stats, TabB_stats: Each HTML file ha ...

What is the best way to incorporate a background image in a Bootstrap tooltip?

I'm having trouble displaying an element with a background-image property within a Bootstrap tooltip. The image is not showing up as expected. <div class="big-panel"> <a href="#" data-bs-toggle="tooltip" data ...

utilizing jquery for dynamic color changes

Check out the code snippet below, which involves the bootstrap accordion and showcases certain elements within the title section. <dt><span><i class="fa fa-tachometer" aria-hidden="true"></i>&nbsp;&nbsp;Manage</span>& ...

Troubleshooting: CSS Styles not loading when passed as property in MUI withStyles

I am currently working on a react component that has a specific style defined as shown below: const StyledInnerItem = withStyles((theme) => ({ bgColor: { backgroundColor: (props) => { console.log('styledInnerItem color: ', props ...

How to rotate text direction using JavaScript and CSS

Despite my extensive efforts, I have been unable to find a solution to a seemingly simple problem. In JavaScript, I have generated dynamic text using the following code: context.fillText('name', 10, 10, 20); Now, I need this text to be ori ...

Tips for arranging accordion buttons side by side so they all expand into a single element

I'm currently working on a unique accordion design where multiple buttons expand into individual areas below when clicked. The standard accordion layout isn't quite what I'm aiming for. I envision the buttons all in a row, and when clicked, ...

Replacing scrollbars of a div using overflow:auto with arrow indicators: A step-by-step guide

Currently, I am in the process of creating a small div element that will enable users to scroll between images within a jquery image zoom plugin designed for an eCommerce website. Below is the code snippet that I have developed thus far: <div style="w ...

What are the steps to create a horizontal submenu in WordPress?

Is there a way to change the default vertical sub menu of my main menu to horizontal? The CSS for the sub menu in stylesheet.css is as follows: .main-nav>ul>li .sub-menu> li { padding:0 20px; } .main-nav>ul>li .sub-menu> li:first-ch ...

Choosing an element in JQuery based on the value of its style property

I have three divs with the same class but different styles. I need to select only the third one using JQuery. <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-div ...

I'm facing an issue with the footer and header that is preventing me from properly positioning any content on the website

When attempting to include an h3 element on the website, it remains stuck at the top. I have tried using CSS properties like position, top, and left but it does not respond to them. Additionally, I experimented with a gallery template from w3schools to see ...

Interested in an issue related to Bootstrap 4 using Flexbox?

1- Seeking advice on an issue with the Header Section not following centering classes (d-flex justify-content center) in Bootstrap 4. Unable to center the text as desired. 2- Font Awesome displays oddly, looking to create a circle around it similar to a l ...

How to display HTML on top without altering the viewport in React?

I am trying to display a component <Top /> above another component <Bottom /> in React. The code structure is as follows: ... [top, setTop] = useState(false); [bottom, setBottom] = useState(true); ... return ( <div> top && (< ...

Tips for aligning text to the right of an image while keeping it fully responsive

What is the best way to align all devices in the center of content? Check out this demo image to see the layout ...

Incorporating a non-clickable image into a list item

Here is the code snippet I am working with: <footer id="footer"> <ul id="labels"> <li id="label1">About</li> <li id="label2"><a href="">blah</a></li> <li id="label3"><a h ...

The form is functioning properly on mobile devices but is currently experiencing issues on the server

Everything runs smoothly when accessing the website and using the form on localhost. However, once it's uploaded to a server, the form only functions correctly on desktop devices. On mobile, the form fails to filter and displays all professionals inst ...

The sticky footer in React shifts upwards when the page has minimal content

Having trouble with my web app's footer not staying at the bottom when there is minimal content on the page. I'm feeling stuck and unsure of how to proceed. Can anyone provide guidance on creating a footer that remains at the bottom of the page, ...

Adjusting webpage zoom based on different screen sizes

Hey there, I ran into an issue with my web page design. It looks great on my desktop monitors, but when I checked it on my laptop, things went haywire. Strangely, adjusting the zoom to 67% seemed to fix the problem. Both screens have a resolution of 1920 ...