Create a custom React component using the CSS grid system

Is there a way to adjust the size of a carousel component and make it smaller using CSS? I tried setting the width in a class but it's not working. How can I achieve this?

grid.css

.wrapper {
    display: grid;
    /* grid-gap: 10px; */
    grid-template-rows: minmax(300px, 500px) 1fr;
    grid-template-columns: 1fr;
}

.carousel {
    width: 50%;
}

app.jsx

import React from 'react'
import Tournament from './Tournament.jsx'
import Carousel from './Carousel.jsx'
import '../resources/styles/grid.css'


const App = () => (
  <div className="wrapper">
      <Carousel className = "carousel"
        name='Copa de campeones'
        description=' Solo para los campeones de cada liga en su carrera'
        contact_name='Joaquin Cardenas'
        contact_number='+56951097841'
        date_tournament='2020-03-15'
        sport='Baby futbol'
      />

      <Tournament
        name='Copa de campeones'
        description=' Solo para los campeones de cada liga en su carrera'
        contact_name='Joaquin Cardenas'
        contact_number='+56951097841'
        date_tournament='2020-03-15'
        sport='Baby futbol'
      />
  </div>
)

export default App

'''
cssreactjsgrid

Answer №1

When setting the width rule as a percentage, it is important to remember that it must be a percentage of something specific. In this case, that something would be a percentage of the parent element (assuming it has a defined width). To ensure proper display, make sure to define a width on the containing div of the carousel.

.wrapper {
  display: grid;
  /* grid-gap: 10px; */
  grid-template-rows: minmax(300px, 500px) 1fr;
  grid-template-columns: 1fr;
  width: 400px; // Specify a width for the parent element
  margin: auto; // This may help center the grid within its container
}

.carousel {
    width: 50%; // The width here is set to 50% of its parent, 'wrapper', resulting in approximately 200px if the wrapper is around 400px
}

App.js

<div className="wrapper">
  <Carousel className = "carousel"
    name='Champions Cup'
    description='Exclusive tournament for league champions only'
    contact_name='Joaquin Cardenas'
    contact_number='+56951097841'
    date_tournament='2020-03-15'
    sport='Baby soccer'
  />

  <Tournament
    name='Champions Cup'
    description=' Exclusive tournament for league champions only'
    contact_name='Joaquin Cardenas'
    contact_number='+56951097841'
    date_tournament='2020-03-15'
    sport='Baby soccer'
  />
</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

The TextField is currently unable to be edited because of an Uncaught TypeError stating it is not iterable

Currently, I am fetching data from an API and updating TextFields with it for display. My goal is to allow users to edit the data shown in these TextFields, but I keep encountering a Uncaught TypeError: prev.fields is not iterable error whenever I attempt ...

javascriptreactjsjsonmaterial-ui

Why does the React Native webview shut down when the app is minimized on Android devices?

Hey there! I've got an app that opens a webview and everything is working perfectly. The only issue I'm facing is when the app goes into the background, it closes the webview and shows the landing screen instead. I'm currently exploring ways ...

androidreactjsreact-nativewebviewreact-native-webview

Converting React useState to a JSON object data type

I imported a JSON data file using the following code: import data from "../data.json"; The contents of the file are as follows: [ { "name": "Emery", }, { "name": "Astrid", }, { " ...

reactjstypescriptnext.jsuse-state

Leveraging hooks and state management tools for a website featuring a dynamic link address in the latest version of Next JS

Currently, I am in the process of creating a small e-commerce website using Next JS 13. However, I have encountered a challenge for which I have yet to find a solution - how can I enable customers to add products to their cart directly from a page displayi ...

reactjsnext.jsreact-reduxreact-contextnext.js13

What is the secret to the lightning speed at which this tag is being appended to the DOM?

Have a look at this concise sandbox that mirrors the code provided below: import React, { useState, useEffect } from "react"; import "./styles.css"; export default function App() { let [tag, setTag] = useState(null); function chan ...

javascripthtmlcssreactjs

Display of menu content may be unavailable at certain screen resolutions

Upon creating a new project in Visual Studio 2017, I developed a default master and sub pages website. In the master page, I incorporated a menu using a mix of divs and tables. Everything functions properly except for when the window size is reduced to a ...

htmlcssasp.net

MongoDB refusing to process delete command

USER: const handleDelete = (id) => { console.log(id); axios.delete(`http://localhost:3001/delete`, {id}) .then(res => console.log(err)}) .catch(err => console.log(err)) } SHOWS ID CORRECTLY IN CONSOLE: vv17OZpdGkMwNEv0 SER ...

node.jsreactjsmongodb

Troubleshooting issue with CSS `gap` property malfunctioning in conjunction with `display: block;` setting

I've run into an issue with the gap property in CSS not working as expected in my layout. After investigating, I found that some of my containers have display: block; set, which seems to be causing the gap property to be ineffective. My goal is to cre ...

htmlcssreactjs

Switch to copy values from one field to another in Formik

Hey there! I'm currently working on a form using Formik within NextJS and I have integrated a switch to allow users the option of using their contact details for invoicing purposes. While I have separate fields for both contact details and invoice de ...

reactjsformsnext.jsformik

use d3 to dynamically color links in a react-force-graph based on their value

I'm looking to develop an app featuring a 3D Force Graph using the resources from the following project: https://github.com/vasturiano/react-force-graph You can check out my sample implementation based on the project's documentation on Github he ...

reactjsd3.jsgraphthree.js

Troubleshooting: When Angular Fade In Out Animation Won't Work

Looking to create a simple animation with the angular animation package The goal is to smoothly transition from opacity 0 to opacity 1 for a fade effect. I've had success with other properties like height and display, but struggling with opacity. H ...

htmlcssangularanimationangular-animations

What is the best way to retrieve a column sorted numerically within a component in a React Table?

I'm currently working with the React Table library to create a table, but I'm facing an issue with formatting and sorting numbers in cells. When I return something other than a number, the sorting doesn't behave as expected—it sorts alphab ...

reactjs

How come the centering of a text input field in an HTML form is proving to be so difficult using the text-align: center property?

Learning HTML has been quite the journey for me. One challenge I have faced is trying to center a search bar on my web page. Despite hours of searching and trying different tutorials, I still haven't been able to make it work. The CSS rule text-align ...

htmlcsstwitter-bootstrapbootstrap-4

Why won't my navigation bar stay in place when I scroll down on the screen?

I'm trying to create a sticky navigation bar that becomes fixed when the user scrolls down to 200 pixels, but it's not working properly. I want it to behave like in this example: import React,{useState,useEffect} from 'react' functio ...

javascripthtmlreactjstailwind-css

When using NextJS dynamic routes, they load successfully for the first time but encounter issues upon refreshing the

My NextJS app has a dynamic route called posts/[id].js. When the page initially loads, everything works perfectly. However, upon refreshing the page, the dynamically fetched data becomes undefined, resulting in the following error: Server Error TypeErr ...

reactjsmongodbnext.js

In a local setting, the KendoUI chips are displaying without their borders

I recently tested out the code from kendo on StackBlitz and it worked perfectly: https://i.stack.imgur.com/Nrp2A.png However, when running the same code on my localhost, all the styling for the chip is missing: https://i.stack.imgur.com/1pUH9.png The c ...

htmlcssangularkendo-ui

Next.js is displaying an error message indicating that the page cannot be properly

Building a Development Environment next.js Typescript Styled-components Steps taken to set up next.js environment yarn create next-app yarn add --dev typescript @types/react @types/node yarn add styled-components yarn add -D @types/styled-c ...

reactjstypescriptwebpacknext.jsstyled-components

Can you explain the purpose of the URL function in the context of url("#foobar"

Currently, I am developing a CSS concatenator and one of the tasks involved is URL to absolute URL rewriting. For this process, I exclude any absolute URLs that start with http, https, etc. In the case of Django projects, they designate the following URL ...

css

The issue with style.background not functioning in Internet Explorer is causing complications

I am currently developing a JavaScript game that involves flipping cards. However, I have encountered an issue with the style.background property. It seems to be functioning correctly in Chrome but not in Internet Explorer. Here is the problematic code sn ...

javascripthtmlcssinternet-explorer

There appears to be an issue with getting RadioGroupButton to function properly in React Starter Kit

Check out this awesome gif: It seems that whenever I try to click on it, nothing happens. Here's the code snippet that is functioning correctly in webpack: However, in my initial setup environment, it doesn't function as expected. Strangely, c ...

reactjsreact-routermaterial-uireact-starter-kitformsy-material-ui