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

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

Privacidad y transparencia

Privacidad y transparencia