Ajutor cu css mobile responsive

Shtrumphu

SEO Expert
Registered
Full Member
Freelancer
SEO Expert
Ma poate ajuta cineva cu CSS? incerc sa fac wrapper-ul sa aibe latimea maxima 500px, insa nu stiu exact ce media query sa pun, am incercat diferite variante dar nu vrea.

css.jpg
 

Peter Pony

Vedeta
Registered
Full Member
Pai nu iti ia din css. Ca si margin iti ia din alta parte 50px. Sj tu ai 0. Daca pui !important?
 

Shtrumphu

SEO Expert
Registered
Full Member
Freelancer
SEO Expert
Multumesc! Am reusit pana la urma, mai avea un fisier CSS, a trebuit sa le iau pe rand. Daca mai are cineva tema Viper si vrea sa o faca adecvata pentru mobil, poate folosi codurile astea:
-in style.css
HTML:
@media screen and (max-width: 500px) {

    .wrapper {
        max-width: 500px;
        margin: 0px 0px;
        border: 0px;
    }
    .body {
        max-width: 500px;
        min-width: 499px;
        position: relative;
        overflow-x: hidden;
    }
    #primary {
        max-width: 450px;
    }
    #content {
        max-width: 450px;
    }
    #head {
        max-width: 500px;
    }
    #colophon {
        max-width: 500px;
    }
    #secondary {
        max-width: 450px;
        clear:left;
    }
    #container_12 {
        max-width: 500px;
    }
    #mobileresponsive {
        display: none;
    }
    #search {
        display: none;
    }
    #botmenu {
        width: 455px;
        background: #f03d0c;
        float: left;
    }
    .page {
        width: 455px;
        background: #f03d0c;
    }
    .html {
        overflow-x: hidden;
    }


}
-in folderul css, fisier 960.css
HTML:
@media screen and (max-width: 500px) {

    body {
        max-width: 500px;
        min-width: 499px;
    }
    .container_12 {
        max-width: 500px;
    }
    .grid_12{
        max-width: 500px;
    }
}
-in header.php, la <div class="searchbox" adaugati id="mobileresponsive"
 

Peter Pony

Vedeta
Registered
Full Member
width face overwrite la max-width. Un articol destul de bun pentru reguli de genul este acesta https://css-tricks.com/tale-width-max-width/
Pai din articol nu reiese asta. Uite un exemplu clar ca nu face overwrite. Div doi desi are width 500px, nu se face mai mare de 300 .
Cod:
<html>
    <head>
    <style>
        .divUnu {
            background-color: green;
            width: 320px;
            max-width: 500px;
        }

        .divDoi {
            background-color: red;
            width: 500px;
            max-width: 300px;
        }
    </style>
    </head>
    <div class="divUnu"> Div Unu
        <div class="divDoi">Div Doi</div>
    </div>

</html>
 

Ovidiu Bokar

It's not a bug, it's a feature!
Administrative
Registered
Full Member
Div doi desi are width 500px, nu se face mai mare de 300
Da, pentru ca are inheritance, adica, divUnu are width:320 si nu poate sa il faca mai mare decat 'parent div'.
Dar pentru responsive daca vrei, creaza un alt div cu max-width: 500px si width: 100% ceea ce va face browserul va fi sa afiseze divul in maxim 500px, iar daca nu are spatiu destul atunci aplica procentajul, uite aici un exemplu: https://jsfiddle.net/obokar/uoqpd51q/ (schimba dimensiunea browserului si ai sa vezi rezultatele).
 

Peter Pony

Vedeta
Registered
Full Member
Da. dar nu inteleg de ce zici ca suprascrie. E max-witdth.. Adica poate fi mai mic.. dar nu mai mare...
 

Reclama

Stiri Monezi Virtuale

Reducere pentru Vacanta

Loading...
Sus