Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

215
Vistas
How do I change the size of the parent div without affecting the children nodes displayed?

I am developing a dashboard application where the user can view information regarding cryptocurrencies, I have fetched the information using coingecko's API, now I want to render the information in a particular place on the page, here is a screenshot of the project I am working on

enter image description here

Here is the React code and the CSS for this part of the page that is being rendered

import React from 'react'
import { Typography } from 'antd'
import "./PriceCard.css"

const { Text, Title } = Typography
const PriceCards = ({ cryptoProps }) => {

    if (!cryptoProps[0]){
        return <></>
    }
    return (
        <div className='priceCard'>
            <div className="cryptoInfo">
                <img src={cryptoProps[0].image}/>
            </div>

            <div className="cryptoInfo">
                <Title level={3}>All Time High</Title >
                <Text strong={true}>$ {cryptoProps[0].ath}</Text>
            </div>

            <div className="cryptoInfo">
                <Title level={3}>Market Cap</Title >
                <Text strong={true}>$ {cryptoProps[0].market_cap}</Text>
            </div>

            <div className="cryptoInfo">
                <Title level={3}>Price Change (24 hours)</Title >
                <Text strong={true}>{cryptoProps[0].price_change_percentage_24h} %</Text>
            </div>
        </div>
    )
}

export default PriceCards

.priceCard {
    width: 100%;
    height: 100%;
    margin-top: 10vh;
    position: absolute;
    right: 10;
    padding-right: 80em;
    border-style: dashed;
}

.cryptoInfo {
    box-sizing: border-box;
    padding: 10px;
    float: left;
    width: 35%;
    height: 35%;
    text-align: center;
}

As you can see the parent div, with the className 'priceCard' has a size that spans the whole page, but I want it to be sized where its just on the top left, where all the information is being presented, but the issue is, once I try to meddle around with the CSS, it messes up the whole page and the information being presented.I still want the information being presented in a grid-like fashion how it is done right now, without anything being moved if I change any CSS to the 'priceCard' div.

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

You use float that's why the boxes move. Here I have added grid:

.priceCard {
    width: 50%;
    height: 100%;
    margin-top: 10vh;
    position: absolute;
    right: 10;
    /*padding-right: 80em;*/
    border-style: dashed;
    display:grid;
    grid-template-columns: 1fr 1fr
}

.cryptoInfo {
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
}
<div class='priceCard'>
            <div class="cryptoInfo">
                <img src={cryptoProps[0].image} alt="image"/>
            </div>

            <div class="cryptoInfo">
                All Time High               
            </div>

            <div class="cryptoInfo">
                Market Cap
            </div>

            <div class="cryptoInfo">
                Price Change (24 hours)
            </div>
</div>

about 4 years ago · Juan Pablo Isaza Denunciar

0

You can use display:grid; to have fixed grid to display the content.

.priceCard {
    width: 50%;
    height: 100%;
    margin-top: 10vh;
    position: absolute;
    border-style: dashed;
    display:grid;
    grid-template-columns: 1fr 1fr;
}

.cryptoInfo {
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
}
<div class='priceCard'>
            <div class="cryptoInfo">
                <img src={cryptoProps[0].image} alt="image"/>
            </div>

            <div class="cryptoInfo">
                All Time High               
            </div>

            <div class="cryptoInfo">
                Market Cap
            </div>

            <div class="cryptoInfo">
                Price Change (24 hours)
            </div>
</div>

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda