Utilize the entire width of the page by evenly dividing it into different components and considering the occurrence of maximum

I have a code where I inserted a component (product), and I want it to take up the full width of the container. If there is only one component, it should use the full width, and if there are 2 or more, they should evenly distribute across the whole width.

  <div className="container mb-5">
     <img src="picture1.jpeg" alt="amazon_image" className="home__img" />
         <div className="row">
            <div className="col-10 mx-auto">
               <div className="row gy-2">
                  <Product/>
               </div>
             </div>
         </div>
         <div className="row">
           <div className="col-10 mx-auto">
             <div className="row gy-2">
                 <Product/>
                 <Product/>
                 <Product/>
              </div>
            </div>
         </div>
    </div>

This is the CSS code corresponding to the HTML provided.

.home__img{
   max-width: 100%;
   height: auto;
   z-index: -1;
   margin-bottom: -180px;
   mask-image:linear-gradient(to bottom , rgb(0,0,0,1) , rgb(0,0,0,0));
}

Here is a preview of my home page

Here is how I expect the homepage to look like

Answer №1

It's common knowledge that there are 12 columns in a single row. By applying the class="col", these 12 columns will be evenly distributed among each div. For instance, if you have one div in a row, it will occupy all 12 columns. If you add a second div, they will each take up 6 columns. In your code:

<div className="row">
        <div className="col-10">
        </div>
</div>

This uses 10 out of the total 12 columns. You should use:

<div className="row">
        <div className="col">
        </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

Adjust the GTK3 tooltip color exclusively for Eclipse when it is operating on Ubuntu

I am using Eclipse Mars on Ubuntu 15.04 and looking to customize the GTK3 tooltip fg/bg color specifically for Eclipse without impacting other applications. I have come across instructions for changing this color system-wide, but I need guidance on how t ...

Animating Divs with jQuery to Expand their Size

I am currently designing a services page for my portfolio website. The layout consists of three columns, with the central column containing a large box and the left and right columns each containing three smaller boxes. These smaller boxes function as clic ...

Elements recognized worldwide, Typescript, and a glitch specific to Safari?

Consider a scenario where you have a select element structured like this: <select id="Stooge" name="Stooge"> <option value="0">Moe</option> <option value="1">Larry</option> <option value="2">Curly</option ...

Adding data to an AngularJS template

I am encountering an issue with a flag that I am toggling between true and false to alter the display of certain elements on my page. While it works outside of the template, integrating this value into the template itself has proven challenging. restrict: ...

Tips for avoiding a React component from causing the page to freeze post-loading

Currently, I am utilizing the uiwjs/react-json-view library to display JSON data. However, there seems to be an issue when attempting to load a large JSON file as it causes the page to freeze. To address this problem, I have already implemented Suspense an ...

Challenges with removing jwt token cookie in Express

//token creation res.cookie('jwt', token, { httpOnly: true, maxAge : 60 * 60 * 24}); //logout and destroying the token exports.logout = (req, res) => { res.cookie('jwt', "token", {httpOnly:true,maxAge:1000}) //unfo ...

Issues encountered with PHP integration for Bootstrap carousel

I'm facing a challenge with modifying an existing carousel to load data from an SQL database instead of hardcoding it. After successfully fetching the data using PHP, I noticed that the controls of the carousel are not functioning as expected. Upon i ...

The functionality of router.prefetch is not recognized, which is causing difficulties in verifying the submit function with React Testing Library

This is a test code for evaluating the functionality of a component. I am checking whether a form submit function is triggered or not. import React from 'react' import { render, screen, fireEvent } from '@testing-library/react' import & ...

Return an array that has been filtered to exclude any elements that are also found in a separate array

I have an API that provides a list of cars. const getAsset = async () => dbApi('list_cars', ['', 100]) .then(result => result.map(e => e.symbol)); Here, the function getAsset returns the car list. 0: "BMW" 1: "HONDA" 2: " ...

Turning off and on CSS transitions to set the initial position

Is there a way in javascript to position divs with rotations without using transitions initially for an animation that will be triggered later by css transition? I have tried a codepen example which unfortunately does not work on the platform but works fin ...

Troubleshooting: Node.js not receiving data from HTML form

I am currently facing an issue with my HTML form and Node.js server. Despite implementing a form that is supposed to send data to the server, no information is being transferred. The form successfully makes a request, but it fails to send any form data alo ...

React: Material-UI: How to justify two elements to opposite ends

Recently, I came across the following code snippet in reactjs using material ui theme: const useStyles = makeStyles((theme) => ({ root2: { maxWidth: 345, flexGrow: 1 }, paper2: { padding: theme.spacing(1), color: theme.palette.text ...

Transitioning to EM-Based Media Queries

After the recent resolution of the WebKit page-zoom bug, what are the primary benefits of utilizing em-based media queries over pixel-based ones? Incentive I am offering a reward for my question as many prominent CSS frameworks and web developers use em- ...

Saving the order of elements dropped in jQuery UI Droppable into an input field

Link to setup: https://jsfiddle.net/7b8bqzsh/1/ You can view a full working example using the link provided above. The objective is to store the order of the links in an input field so that it can be saved to a database. Currently, only the latest ID is ...

Disable Dates in Material UI Date Textfield

Is there a way to prevent users from selecting dates between the specified Min and Max dates in a material UI date textField? For example, if the minimum date is today's date 01/30/2023 and the maximum date is next month's date 02/30/2023, I wou ...

What is the best way to implement the map function on an array of objects in React?

After successfully fetching the data using fetchAPI, I'm encountering issues with displaying the content due to the array's nature. import React, { useState, useEffect } from "react"; function Home() { const [userData, setUserData] = ...

Why isn't internationalizing a next.js website via subpaths functioning properly within subdirectories?

Currently, I am working on internationalizing my website using the subpath feature of next.js. Below is the code snippet for my module.export: /* eslint-disable prettier/prettier */ module.exports = { i18n: { defaultLocale: 'fr', local ...

Utilizing Material-UI with MobileDialog HOC in TypeScript: A Beginner's Guide

I'm running into an issue while trying to implement withMobileDialog in my TypeScript code. Below is the snippet of my code, inspired by a code example from the official documentation. import withMobileDialog, { InjectedProps } from "@material-ui/co ...

Steps for transferring data from one flatlist to another (an array of objects) within the same page featuring identical data:

const DATA = [ { car_name: 'Ford', model_number: '2021 . 68 - 1647', full_tank: false, suggestion: [ { price: '$2.50', type: 'Oil Top up&apos ...

Utilizing jQuery taggd to add annotations to images

I am currently utilizing the taggd Plugin to develop an application that creates a tag whenever any part of the body is clicked. I have successfully implemented most aspects of it, but I am facing an issue with the coordinates. The tags are sometimes creat ...