Ajutor cu css mobile responsive

Shtrumphu

Active Member
Registered
Freelancer
SEO Expert
#1
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
#2
Pai nu iti ia din css. Ca si margin iti ia din alta parte 50px. Sj tu ai 0. Daca pui !important?
 

Shtrumphu

Active Member
Registered
Freelancer
SEO Expert
#6
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
#8
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

Live every day to the fullest - in moderation.
Registered
Full Member
#9
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
#10
Da. dar nu inteleg de ce zici ca suprascrie. E max-witdth.. Adica poate fi mai mic.. dar nu mai mare...
 

AlexH

Merg pe strada catre Mine...
Membru personal
Administrative
Freelancer
SEO Expert

Reclama

Loading...

Reclama Ta Aici

Stiri Monezi Virtuale

Reducere pentru Vacanta

nCheck

Sus