[ Predrag Supurovic @ 09.04.2024. 16:38 ] @
Pravim neku jednostavnu stranicu i prvi put koristim bootstrap. Iskustvo mi je 0.

Uglavnom, namestio sam da sve radi kako zelim osim jedne stvari.

Stranice je responsive i sve se lepo slaze osim sto za jednu liniju teksta zelim da text bude manji kada se prikazuje na malom uredjaju, a da bude veci kada je prikaz na PC monitoru.


Probao sam ovo



.main_contact {

     font-size: 1rem;    

}



@include media-breakpoint-up(sm) {

  .main_contact {

     font-size: 2rem;    

  }

}



Prema dokumentaciji ovo bi trebalo da primeni veca slova ako je medij veci od SM. Medjutim, slova ostaju mala.


Probao sam i da obrnem logiku:


.main_contact {

       font-size: 2rem;    

}



@include media-breakpoint-down(lg) {

  .main_contact {

     font-size: 1rem;    

  }

}



Ni tako ne radi.

Gde grešim?

[ mjanjic @ 09.04.2024. 17:20 ] @
Ako već koristiš mixins, ubaci taj @include u sam stil za klasu main, tj.

.main_contact {
font-size: 1rem;
@include media-breakpoint-up(sm) {
font-size: 2rem;
}
}

Potom, proveri preko inspect panela u browser-u zašto ti ne prikazuje veličinu fonta kako treba, moguće da neki drugi stil ima veći prioritet zbog selektora.