Oh, wow, uitați-vă și la cpu când faceți resize și aveți abominația aia 
Eu cred că ar trebui să înțelegi de ce nu funcționează css-ul de mai sus, nu să te bazezi pe JS pentru asta.
Tind să cred că e vreo specificitate mai mare pe undeva (e.g. .header .slogan { font-size:50px }) și de asta nu merge.
Nu poți pune și o versiune compilată?
Da, ai dreptate, nu m-am gandit la acest lucru 
Totusi, se poate imbunatati codul de mai sus.De asemenea la fel cum ai spus mai spus, mai bine cu css.
Cred ca versiunea asta este mult mai buna ( sursa: stackoverflow ).
$(window).resize(function() {
clearTimeout(window.resizedFinished);
window.resizedFinished = setTimeout(function(){
if ($(window).width() > 1992) {
$('p').css('font-size', '300px');
} else if ($(window).width() > 768) {
$('p').css('font-size', '200px');
} else if ($(window).width() > 480) {
$('p').css('font-size', '100px');
} else if ($(window).width() > 320) {
$('p').css('font-size', '50px');
} else {
//...
}
}, 250);
});E o idee proastă în general să alterezi stilurile cu JS.
Cu JS nu faci decât să adaugi o dependență inutilă, pentru că se poate rezolva cu CSS.
http://claudiux4x.zz.mu/NoName/
Aici e tot CSS-u meu.
/* Body */
body {
font-family: 'Source Sans Pro';
color: #FFF;
}
/*Nav Bar Custom*/
.navbar-custom {
background: #242424;
}
.navbar-brand,
.navbar-nav li a {
line-height: 60px;
height: 60px;
padding-top: 0;
}
.navbar-toggle {
margin-top: 13px;
}
.navbar-fixed-top{
border-width: 0 0 0px;
}
.navbar .nav > li > a {
float: none;
color: #FFF;
text-shadow: none;
}
.navbar .nav > li > a:hover {
float: none;
color: #3498db;
text-shadow: none;
}
/* Fist BG */
.first-bg {
margin-top: 60px;
background-color: #3498db;
width: 100%;
height: 500px;
}
@media (max-width: @screen-md) {
.slogan {
font-size: 72px;
}
}
@media (max-width: @screen-sm) {
.slogan {
font-size: 56px;
}
}
@media (max-width: @screen-xs) {
.slogan {
font-size: 26px;
}
}Ah! Păi de asta nu merge!
@media (max-width: @screen-md) { ar trebui să conțină dimensiunea, nu o variabilă LESS
Adică ar trebui să fie: @media (max-width: 768px) {
Revin cu o mica intrebare, sa zicem ca am cv de genul
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
Si in fiecare col vreau sa pun cate ceva, un div cu text, imagine… etc.
Cum e cel mai indicat mod de a centra acel text/imagine ? Cu margin pe div-u respectiv? Dar asta ar afecta asezarea in momentul redimensionarii.
Presupunând că ai un markup de genul:
<div class="col-md-4"><div class="centered"></div></div>
Poți face așa:
.centered {
max-width:500px; //sau cât ai tu nevoie
margin:auto;
}
Pe ecranele mici va ocupa tot containerul. Pe ecranele mari va avea maxim 500px.
Salutare… revin dupa o lunga pauza si am nev de putin ajutor.
Asa arata initial in full screen:
Ce ma deranjeaza, si nu reusesc sa fac… e ca in full screen butaonele sa fie centrare pe verticala. Am incercat mai multe tehnici gasite pe google, dar nu mi-au mers.
HTML:
<header>
<div class="containter-fluid header-container">
<div class="container">
<div class="row header-row">
<div class="col-md-4">
<img class="img-responsive center-block" src="img/logo.png"></img>
</div>
<div class="col-md-8">
<div class="col-md-3">
<div class="menu-button active">Despre noi</div>
</div>
<div class="col-md-3">
<div class="menu-button">Magazin Online</div>
</div>
<div class="col-md-3">
<div class="menu-button">Blog</div>
</div>
<div class="col-md-3">
<div class="menu-button">Contact</div>
</div>
</div>
</div>
</div>
</div>
</header>
CSS:
.header-row{
margin-top: 10px;
}
.header-container{
-webkit-box-shadow: 1px 14px 25px -1px rgba(0,0,0,0.04);
-moz-box-shadow: 1px 14px 25px -1px rgba(0,0,0,0.04);
box-shadow: 1px 14px 15px -1px rgba(0,0,0,0.04);
}
.display-table{
display: table;
table-layout: fixed;
}
.display-cell{
display: table-cell;
vertical-align: middle;
float: none;
}
.menu-button{
font-size: 18px;
color: #95a5a6;
text-align: center;
}
.menu-button:hover{
color: #000;
}
.menu-button.active{
color: #000;
}
@media all and (max-width: 1200px) { /* screen size until 1200px */
.menu-button{
font-size: 16px;
color: #95a5a6;
}
}
@media all and (max-width: 1000px) { /* screen size until 1000px */
.menu-button{
font-size: 15px;
color: #95a5a6;
}
}
@media all and (max-width: 500px) { /* screen size until 500px */
.menu-button{
font-size: 10px;
color: #95a5a6;
}
}Nu am folosit Bootstrap niciodata, dar iata o varianta de rezolvare:
Rescrii HTML-ul deoarece nu prea e ok ce ai facut acolo. Ar trebui sa fie ceva de genul:
Ii mai adaugi tu divurile si clasele de la Bootstrap.
In CSS, trebuie sa dai la ul un line-height de aceeasi marime cu logo-ul. De exemplu, daca logo-ul are 100px, tu o sa ai:
nav ul {
line-height: 100px;
}
De asemenea, nu uita sa pui si
nav ul li {
display: inline-block;
}
ca sa iti stea toate elementele pe o singura linie.
Daca folosesc line-heigh imi lasa saptiu si cand e in rezolutie mai mica… si nu vreau.
Eu nu as folosi grid-ul de boostrap la ce ai tu nevoie acolo.
Totusi, daca insisti sa mergi asa, uite aici rezolvarea mea.
- Am adaugat o clasa pe containerul meniului,
- Dupa care i-am dat un padding vertical in functie de nevoie.
Un exemplu de mark-up pentru cazul tau.
<header>
<div class="logo"></div>
<nav class="primary-nav">
<ul>
<li class="active"><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</nav>
</header>
Ty… O sa revin si cu alte intrebari pe parcurs 
Salut, am revenit
O “formula” mai estetica pentru a pozitiona div-ul rosu acolo jos exista?
In cazul acesta trebuie sa tratez fiecare exceptie in media screen in functie de rezolutie, pentru ca am nev de acel div negru sa fie responsiv, asta insemnand ca la o rezolutie mai mic div-ul rosu iese din cel negru.
position:relative la cel negru, position:absolute;bottom:0 la cel roșu.
Si daca vrei sa ramana centrat adaugi la codul lui iamntz si urmatoarele:
left: 50%;
transform: translateX(-50%);
Revin cu o mica problema, nu-mi dau seama unde e problema.
Problema:
Nu-mi dau seama de ce lasa acel spatiu.
Aveti aici source: http://clau4.esy.es/Bijoux/
Eu i-am debifat din developer tools marginile alea negative de la rows din bootstrap.min.css si s-a centrat numai bine. Dar eu am lucrat mai mult cu foundation de la zurb si nu stiu cat de mult va afecta modificarea asta in restul framework-ului.
@Cristi_Nebunu a intuit bine problema: când folosești grid-ul bootstrap este nevoie să pui totul într-un .container sau .container-fluid.
Salutare, o mica intrebare am 
Vreau sa stiu daca e “sanatos” cum am pus eu acel titlu deasupa fiecarei imagini.
HTML:
<div class="row store">
<h1 class="store-title-right"><strong>Brasov</strong></h1>
<div class="col-md-4">
<h2 class="store-cell-title">Store - 1</h2>
<div class="col-md-12 store-cell"></div>
</div>
<div class="col-md-4">
<h2 class="store-cell-title">Store - 2</h2>
<div class="col-md-12 store-cell"></div>
</div>
<div class="col-md-4">
<h2 class="store-cell-title">Store - 3</h2>
<div class="col-md-12 store-cell"></div>
</div>
</div>
CSS:
.store {
}
.store-title-right {
color: #000;
font-size: 38px;
text-align: right;
}
.store-cell-title {
text-align: center;
color: #000;
}
.store-cell {
background-image: url(../img/Store/1.jpg);
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
height: 220px;
}
Cred ca m-am complicat putin ca am pus col in col
Mergea si geva gen, dar cu alte setari pe store-cell-title ?:
<div class="row store">
<h1 class="store-title-right"><strong>Brasov</strong></h1>
<div class="col-md-4 store-cell">
<h2 class="store-cell-title">Store - 3</h2>
</div>
<div class="col-md-4 store-cell">
<h2 class="store-cell-title">Store - 3</h2>
</div>
<div class="col-md-4 store-cell">
<h2 class="store-cell-title">Store - 3</h2>
</div>
</div>Nu are rost sa pui col-md-12. Nici nu recomand sa folosesti background-image, foloseste tag-uri de img pentru imagini ce trebuiesc indexate. “background-image” e pentru imagini ce au rol stilistic.