- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Aiuto su CSS
-
@justov12 HTML -> riga 9 , 10 e 11, togli i tre <br>
-
@justov12 vedi se ti va bene così https://codepen.io/justoverclockl/pen/OJbQpqy
Cavolo non lo ha modificato nel link che ti ho messo, oltre ai <br> detti nel commento precendente da @shazarak , nel file css .wrapper .icone cambia il padding-top in 10px
Devi formattare le icone social per il mobile che vanno fuori schermo
1 Risposta -
@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?
A 1 Risposta -
@justov12 calcola che io sto facendo e vedendo tutto da cell, ti metto le immagini di come le vedo io. Allora per centrare le icone dei social nel momento che si usa un dispositivo mobile, devi creare sempre nel documento css una classe a parte creando una media queries es:
@media only screen and (min-width:150px) and (max-width:700px) {
.wrapper {
Max-whit:100%;}
}Questo è un esempio non so se è la classe giusta, perché attualmente non lo riesco a testare.
In più prova a cancellare la cache del browser se fai modifiche e non cambia quando aggiorni.
Nel link trovi le img di come le vedo io
1 Risposta -
@andrea-paolelli a prescindere dal mobile non sono centrate nemmeno adesso che sono da pc fisso
A 1 Risposta -
@justov12 allora adesso lo sto vedendo da pc e ti dico che io lo vedo centrato in codepen, ho tolto anche nei css in .wrapper .icon {margin= 0 20px;} che avvicina di più le icone e si centrano meglio.
mi dispiace che non riesco a caricare le img
1 Risposta -
@andrea-paolelli non è per niente allineata, allego questa così capite meglio cosa voglio dire
1 Risposta -
Miglior Risposta
@justov12
.wrapper{
display: flex;
justify-content:space-between;}
togli margin: 0 20px; da .wrapper .iconriguardo 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
1 Risposta -
@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.
1 Risposta -
@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;}