Is it possible to create a horizontal overflow effect for a row of div elements?

Question About Display Size

I am struggling to keep the second title card inline with the first one, regardless of the display size. My current CSS setup includes using a scrollbar for overflow management.

This is the CSS I am currently utilizing (.mainCard set to display: inline):

.trending {
  overflow-x: auto;
}

.mainCard {
  background-color: aqua;
  border-radius: 10px;
  float: left;
}

Although I have attempted using white-space: nowrap;, this caused an issue where the text overflows instead of the cards themselves.

Screenshot showing result of using white-space: nowrap

.trending {
  white-space: nowrap;
  width: 100%;
  overflow: auto;
}

.mainCard {
  background-color: aqua;
  border-radius: 10px;
  float: left;
}

I am currently working with react-bootstrap and any assistance would be greatly appreciated. Thank you!

htmlcssreactjs

Answer №1

I'm not entirely sure if I understand your question correctly. Are you asking whether you want the Movie Title and Description Text.. to be displayed inline?

You could utilize HTML tags such as 

<h1>{Title}<span>{Desctiption}<span/></h1>
, or perhaps consider using display: flex or display: grid. In any scenario, it might be helpful to refer to the documentation.

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

Alter the font color upon clicking the menu using jQuery

When I click on the menu and sub-menu items, I want to change their colors along with their parent. You can see an example of how I want it to work here. However, currently, when I click on a sub-menu item, the color of the parent menu item gets removed. ...

javascriptjqueryhtmlcss

How can we swap out useEffect for componentDidMount when including a callback function within componentDidMount?

When I implemented the useEffect hook, my array state variable did not append the previous value as expected. However, it worked fine with componentDidMount. After using console.log to debug, I found that all messages were correctly printed out when using ...

reactjsreact-lifecyclereact-lifecycle-hooks

Creating a competition schedule - pieces don't quite mesh

Having trouble getting my tournament bracket visuals to come together smoothly! Here is the CSS code I have: #tournament-holder{ width:708px; padding:20px 0 20px 15px; float:left; } .vertical-holder{ width:100px; padding-right:15px; float:left; } .horizo ...

phphtmlcss

The error message "TypeError: Attempting to access the 'map' property of an undefined value (React JS)" was displayed

I'm currently working on a recursive function that needs to iterate over an object type called ItemType. However, I encountered an error message: TypeError: Cannot read property 'map' of undefined This is the code snippet causing the issue: ...

reactjstypescripttsx

Firebase integration in a React blogging platform

Currently working on a React blog integrated with Firebase database. I am struggling with setting up a post page that allows users to view articles in more detail, complete with photos and IDs. Any suggestions on how to tackle this? Would greatly appreci ...

reactjsfirebase

Is there a glitch in my redux-saga?

After developing a React Native app, I encountered an issue with my index.ios.js file where I was adding middlewares to the store. import React, { Component } from 'react' import { AppRegistry, } from 'react-native' import { Provider ...

javascriptreactjsreact-nativereduxredux-saga

The ordering of imports is not followed by prettier-plugin-sort-imports

Currently, I am utilizing @trivago/prettier-plugin-sort-imports version 4.0.0 along with prettier version 2.6.2. However, it appears that the plugin is not adhering to my specifications or perhaps I am unable to correctly define my requirements. Here' ...

node.jsreactjsprettier

Unable to load AngularJS thumbnails from JSON file? Learn how to showcase a larger image by clicking on the thumbnail

Working with AngularJS to retrieve image data from a JSON file has been successful for me. My next task involves loading all of the thumbnail images into the gallery div and populating the src, alt, and title attributes using ng-repeat. However, this part ...

javascripthtmlangularjsjson

I am experiencing difficulties with the deletion query function in Supabase

async function removeImage(imageName) { const { result, err } = await supabase .storage .from('img') .delete([ CDNURL + "/" + imageName ]) console.log(result) I wrote this code to delete an image b ...

reactjspostgresqlbucketsupabasesupabase-database

Webpack loaders or plugins: understanding the distinction

Can you explain the distinction between loaders and plugins in webpack? I found on the documentation for plugins that it states: Plugins are used to incorporate extra functionalities usually related to bundles within webpack. While I understand that b ...

javascriptreactjswebpack

How can you utilize CSS grid to position an alternate symbol alongside ordinary text?

Does anyone have suggestions on how to align an "alt symbol" with "regular text"? I'm struggling to center both elements without resorting to hacky solutions. Currently, I am using CSS grid, but I am open to exploring other solutions that are easy an ...

htmlcsscss-gridcentering

Managing meta tags and page titles for search engine optimization in React

My React (redux) app relies on client-side rendering. In order to ensure that Google could crawl my site and display the correct information in search results, I implemented a library called react-helmet, which allows me to dynamically change the title and ...

reactjsreact-routerreduxreact-router-redux

Issue encountered while retrieving values from JSON for the data table

I recently developed an application using a combination of React and Flask to display JSON data in a table format. While I can successfully see the data loaded in the console, I encountered difficulties in rendering it within the data table. The technologi ...

javascriptjsonreactjsdatatablematerial-ui

Wrapping content in flexbox and aligning it justified

I have an issue where I want to display a page title on the left side and a rating number with stars on the right side. My goal is to center all items once flexbox wraps. Specifically, when the "Longer Page Title" reaches the rating and stars and the flexb ...

cssflexbox

Aligning text vertically within an HTML <a> tag block

Calling all CSS experts! I'm struggling with aligning text to the bottom of a block element with a fixed width and height that contains a background image and a title. I've tried using display: table-cell; and vertical-align: bottom; without succ ...

htmlcsstagsvertical-alignment

What is preventing me from modifying the input file name in PHP?

After executing the code below, an error message pops up: "Notice: Undefined index: uploadFile in C:\xampp\htdocs\ImageTest\processImage.php on line 17" However, when I switch every occurrence of 'uploadFile' with 'fi ...

phphtmlglobal-variables

React UseEffect does not trigger update upon deletion of data from array

I've hit a roadblock and need some assistance. I'm working on a MERN stack application that interacts with the Github API. Users can search for Github users, save them to their profile on the app, and automatically start following them on Github. ...

javascriptreactjsreact-hooksuse-effectmern

Strange CSS/browser storage glitch

UPDATE: JUST REALIZED THIS ISSUE IS ONLY OCCURRING ON FIREFOX, NOT CHROME ANOTHER UPDATE: Oddly enough, this problem only occurs locally. When I push it to GitHub, everything works fine. So strange. I suppose that means it's not a major issue. On my ...

javascriptcssgoogle-chromefirefox

Animated image inside clickable element (HTML, CSS)

Is there a method to embed a gif within a button and have it activate on hover? ...

htmlcssbuttongif

Resolving Incompatibility Problems Between Devices

While learning Typescript with React, I have encountered type compatibility issues when converting dates. Below is the content of my data.ts file: import { Result } from "./columns"; export enum Quality { High = "high", Medium = & ...

reactjstypescript