Aiuto su CSS

[justov12]

Aiuto su CSS

Per la nuova community italiana di Flarum stò sistemando graficamente il forum di supporto, ed ho attualmente fatto un codepen che non riesco a sistemare, qualche aiutino mi farebbe comodo dai più esperti

https://codepen.io/justoverclockl/pen/OJbQpqy

in pratica non riesco a spostare le icone più in alto, in modo che il tooltip arrivi pochissimo sotto il testo. mi stà facendo diventare matto (ovviamente non sono un esperto)

come posso fare?
ovviamente spero di aver creato anche qualcosa di responsive, che vada bene sul mobile.

[shazarak]

@justov12 HTML -> riga 9 , 10 e 11, togli i tre <br>

[justov12]

@andrea-paolelli fatte le modifiche, ma non sono ancora centrate le icone, è tutto spostato sulla destra, per crearle responsive non ho idea di cosa fare, potete darmi qualche info come se parlaste ad un neofita totale?

[justov12]

@andrea-paolelli a prescindere dal mobile non sono centrate nemmeno adesso che sono da pc fisso

[justov12]

@andrea-paolelli non è per niente allineata, allego questa così capite meglio cosa voglio dire

https://i.ibb.co/0fgLQPn/Senza-titolo-2.png

[shazarak]

@justov12
.wrapper{
display: flex;
justify-content:space-between;

}
togli margin: 0 20px; da .wrapper .icon

riguardo al mobile dipende sempre da come vuoi che vengano visualizzate le icone (a prescindere dal fatto che poi dovrai penso sistemare i tooltip)

con questo
.wrapper{
display: flex;
justify-content:space-between;
flex-flow: row wrap;
}
mantieni le icone in riga e su mobile stretto te le manda a capo su nuova riga ecc.

altrimenti vai di media query e gli dici che fino a X width deve mantenere un direction cloumn ( invece che row) e te le mette tutte una sotto l'altra

altrimenti ripeto dipende da come le vuoi, puoi anche pensare di rendere le icone piu piccole e farle stare tutte in una riga, oppure farle andare su due colonne e piu righe ecc

Comunque fai tutto con flexbox e media query

[justov12]

@shazarak grazie mille! ora va decisamente meglio, ho tolto le icone non necessarie ed ora va benissimo. grazie mille!, un altra piccola domanda, come posso impostare la larghezza del box di testo? forse è un pochino stretto, ma con width non riesco.

[shazarak]

@justov12 a vedere cosi come è stato creato html la larghezza del box che contiene il testo è dato da questo: <div class="col-lg-6 offset-lg-3"> quelli sono impostazioni di griglia da bootstrap 4

https://getbootstrap.com/docs/4.0/layout/grid/

quindi se ci sono 12 colonne nella griglia, tu stai usando un 6 colonne con un offset di 3 colonne, che significa che lo hai centrato, diciamo cosi

se vuoi il "box" piu largo lavori sull'aumentare le colonne e diminuire l'offset... ma se usi 7 colonne poi non te lo centra piu e quin entra in gioco il justify-content guarda le info di boootstrap e trovi la soluzione per te

tipo
HTML riga 3-4 cambia in
<div class="row justify-content-center">
<div class="col-lg-7 ">

CSS riga 97-100 rimuovi
.testo{
width: 650px;

}