Cómo cambiar el nombre de la clase .circulos en CSS y HTML

WebmasterKing · 10 Ene 2022

Hola!! Necesito una ayudita.

Tengo este codigo funcionando bien
HTML:

Insertar CODE, HTML o PHP:

</style>


<div class="circulos">
    <div class="circulo">
        <h2>30</h2>
    </div>
    <div class="circulo">
        <h2>22</h2>
    </div>
    <div class="circulo">
        <h2>25</h2>
    </div>
</div>

</body>
</html>

CCS:

Insertar CODE, HTML o PHP:

.circulos {
    width: 500px;
    display: flex;
}

.circulo {
    width: 60px;
    height: 60px;
    color: #737373;
    border-radius: 50%;
    background-color: #efefff;
    border: 0px solid #efefff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
    margin-bottom: 5px;
}

.circulo:nth-child(6){
    color: #ffffff;
    background-color: #6f70ff;
    border: 0px solid #0100fe;
}

.circulo:nth-child(7){
    color: #ffffff;
    background-color: #ff6162;
    border: 0px solid #ff6162;
}

.circulo > h2 {
    font-size: 25px;
    font-weight: bold;
    font-family: sans-serif;
    margin: 0px;
}
.circulos {
    width: 300px;
    display: flex;
    flex-wrap: wrap;
}

PERO CUANDO INTENTO CAMBIAR EL NOMBRE .circulos EN TODO EL CCS Y HTML, PARA HACER ALGUNOS CAMBIOS DE COLORES Y MANTENER LA PRODPIEDADES DEL PRIMER CODIGO EN OTRAS COLUNNAS SE ME PONE ASI:

COMO SE SOLUCIONA ESTO?

samuelsuteras · 10 Ene 2022

Problema de cache o hay alguna clase que tiene algo asi como .clase .circulos{
estilos
}

Benderslab · 10 Ene 2022

Queres cambiar la clase circulo por circulos? No entiendo bien.

iniciopublic · 10 Ene 2022

No entendi

WebmasterKing · 10 Ene 2022

samuelsuteras dijo:
Problema de cache o hay alguna clase que tiene algo asi como .clase .circulos{
estilos
}

No es cache ya lo verifique. No entendi lo otro

iniciopublic dijo:
No entendi

Osea mira: https://donlotery.com/elementor-929/ sale mal

Alvin Cortez dijo:
Queres cambiar la clase circulo por circulos? No entiendo bien.

chekalo aqui: https://donlotery.com/elementor-929/

samuelsuteras · 10 Ene 2022

a la clase llamada color le estas dando un width de 300px y en la misma clase que la llamas en aguna otra parte de tu css tiene un height de 60px, no puedes tener un circulo perfecto si el width y el height son distintos

WebmasterKing · 10 Ene 2022

samuelsuteras dijo:
a la clase llamada color le estas dando un width de 300px y en la misma clase que la llamas en aguna otra parte de tu css tiene un height de 60px, no puedes tener un circulo perfecto si el width y el height son distintos

Uff no entendi es que no se nada de codigo puede enviarmelo con la correcciones por favor?

colobaggins · 10 Ene 2022

Buenos dias colega, no esta tomando los cambios (segun el link que pasaste https://donlotery.com/elementor-929/ )
Si usas el inspector del navegador, no tenes las clases.. por algun motivo no se imprime ni el div que contiene a los circulos con la clase "circulos", ni cada clase "circulo". Estas guardando bien los cambios? problemas de internet / internet lento? ... la manera de borrar cache es con ctrl+shift + supr , mas herramientas, borrar datos de navegacion, "todos los tiempos"

Wizatek · 10 Ene 2022

Amigo tienes que cambiar la clase que engloba a los items, cámbialo por ejemplo a .colors y aplícale un display:flex y los .color ponle un witch y height de 60px

WebmasterKing · 10 Ene 2022

Wizatek dijo:
Amigo tienes que cambiar la clase que engloba a los items, cámbialo por ejemplo a .colors y aplícale un display:flex y los .color ponle un witch y height de 60px

Ver el archivo adjunto 668151

Voy a ver como lo hago ya que no se bregar con esto xD

samuelsuteras · 10 Ene 2022

Insertar CODE, HTML o PHP:
El problema numero 1 es que tienes 1 contenedor padre y 3 hijos (los circulos verdes)

pero el padre tiene la misma clase que los hijos, donde ya vamos mal.

el padre se tiene que llamar colors y cada hijo color

Insertar CODE, HTML o PHP:

.colors{ display: flex; flex-direction: row; flex-wrap: nowrap; } .color{ width: 60px; height: 60px; color: #FFF; border-radius: 50%; background-color: #48A413; border: 0 solid #efefff; display: flex; justify-content: center; align-items: center; margin-right: 5px; margin-bottom: 5px; }

Wizatek · 10 Ene 2022

WebmasterKing dijo:
Voy a ver como lo hago ya que no se bregar con esto xD

Cambia la clase que engloba a los divs color

y esa nueva clase colócale el estilo display:flex luego de eso vas a la clase color y ponles un witch y height de 60px

No se si me he explicado bien 😀

iniciopublic · 10 Ene 2022

La clase que encierra los ítems redondos es la misma que el div que los contiene, cambialos por ejemplo:

Insertar CODE, HTML o PHP:

color2.{width: 60px; height: 60px; color: #737373; border-radius: 50%; background-color: #efefff; border: 0 solid #efefff; display: flex; justify-content: center; align-items: center; margin-right: 5px; margin-bottom: 5px;}

WebmasterKing · 10 Ene 2022

iniciopublic dijo:
La clase que encierra los ítems redondos es la misma que el div que los contiene, cambialos por ejemplo:

Insertar CODE, HTML o PHP:

color2.{width: 60px; height: 60px; color: #737373; border-radius: 50%; background-color: #efefff; border: 0 solid #efefff; display: flex; justify-content: center; align-items: center; margin-right: 5px; margin-bottom: 5px;}

Lo logre pero queda en fila hacia abajo no hacia los lados como los demas mira: https://donlotery.com/elementor-929/

Wizatek dijo:
Cambia la clase que engloba a los divs color Ver el archivo adjunto 668159

y esa nueva clase colócale el estilo display:flex luego de eso vas a la clase color y ponles un witch y height de 60px

No se si me he explicado bien 😀

Lo hice y mira como se ve: https://donlotery.com/elementor-929/ se hace una fila hacia abajo no hacia los lados como las demas

@samuelsuteras mira como se e ahora hacia abajo y no hacia los lados: https://donlotery.com/elementor-929/

Wizatek · 10 Ene 2022

WebmasterKing dijo:
Lo logre pero queda en fila hacia abajo no hacia los lados como los demas mira: https://donlotery.com/elementor-929/

Lo hice y mira como se ve: https://donlotery.com/elementor-929/ se hace una fila hacia abajo no hacia los lados como las demas

@samuelsuteras mira como se e ahora hacia abajo y no hacia los lados: https://donlotery.com/elementor-929/

Vuelve a leer mis mensajes porque aun no lo has comprendido.

iniciopublic · 10 Ene 2022

WebmasterKing dijo:
Lo logre pero queda en fila hacia abajo no hacia los lados como los demas mira: https://donlotery.com/elementor-929/

Lo hice y mira como se ve: https://donlotery.com/elementor-929/ se hace una fila hacia abajo no hacia los lados como las demas

@samuelsuteras mira como se e ahora hacia abajo y no hacia los lados: https://donlotery.com/elementor-929/

Cambia esto:

Insertar CODE, HTML o PHP:

<div class="color">
    <div class="color">
        <h2>30</h2>
    </div>
    <div class="color">
        <h2>22</h2>
    </div>
    <div class="color">
        <h2>25</h2>
    </div>
</div>

Por esto:

Insertar CODE, HTML o PHP:

<div class="color">
    <div class="colores">
        <h2>30</h2>
    </div>
    <div class="colores">
        <h2>22</h2>
    </div>
    <div class="colores">
        <h2>25</h2>
    </div>
</div>

Agrega este nuevo css:

Insertar CODE, HTML o PHP:

.colores {
    width: 60px;
    height: 60px;
    color: #737373;
    border-radius: 50%;
    background-color: #efefff;
    border: 0 solid #efefff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
    margin-bottom: 5px;
}

carloseduran2021 · 10 Ene 2022

WebmasterKing · 10 Ene 2022

iniciopublic dijo:

Cambia esto:

Insertar CODE, HTML o PHP:

<div class="color">
    <div class="color">
        <h2>30</h2>
    </div>
    <div class="color">
        <h2>22</h2>
    </div>
    <div class="color">
        <h2>25</h2>
    </div>
</div>

Por esto:

Insertar CODE, HTML o PHP:

<div class="color">
    <div class="colores">
        <h2>30</h2>
    </div>
    <div class="colores">
        <h2>22</h2>
    </div>
    <div class="colores">
        <h2>25</h2>
    </div>
</div>

Agrega este nuevo css:

Insertar CODE, HTML o PHP:

.colores {
    width: 60px;
    height: 60px;
    color: #737373;
    border-radius: 50%;
    background-color: #efefff;
    border: 0 solid #efefff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
    margin-bottom: 5px;
}

Sigue saliendo vertical con tu codigo amigo quiero que la linea salga horizontal

iniciopublic · 10 Ene 2022

WebmasterKing dijo:
Sigue saliendo vertical con tu codigo amigo quiero que la linea salga horizontal

Es por que no hiciste los cambios que te mostré

Veo la misma clase en el div :

Insertar CODE, HTML o PHP:

<div class="color">
    <div class="color">
        <h2>30</h2>
    </div>
    <div class="color">
        <h2>22</h2>
    </div>
    <div class="color">
        <h2>25</h2>
    </div>
</div>

WebmasterKing · 10 Ene 2022

iniciopublic dijo:
Es por que no hiciste los cambios que te mostré

Veo la misma clase en el div :

Insertar CODE, HTML o PHP:

<div class="color"> <div class="color"> <h2>30</h2> </div> <div class="color"> <h2>22</h2> </div> <div class="color"> <h2>25</h2> </div> </div>

Si se lo puse igual y sale vertical mira: https://donlotery.com/elementor-929/

Cómo cambiar el nombre de la clase .circulos en CSS y HTML

WebmasterKing

samuelsuteras

Benderslab

iniciopublic

WebmasterKing

samuelsuteras

Adjuntos

WebmasterKing

colobaggins

Wizatek

WebmasterKing

samuelsuteras

Adjuntos

Wizatek

iniciopublic

WebmasterKing

Wizatek

iniciopublic

carloseduran2021

WebmasterKing

iniciopublic

WebmasterKing

Temas similares