CSS - urządzenia mobilne

[huckfinn]

Witam

 

Mam problem z ustawieniem stylu by strona wyświetlała się prawidłowo na urządzeniach mobilnych. Zauważyłem, że strona przechodzi test Google gdy zmienie:

 

.main {
margin : 0 auto;
width : 860px;
position : relative;
}

 

Na:

 

.main {
margin : 0 auto;
width : 100%;
position : relative;
}

Na urządzeniach mobilnych wtedy jako tako to wygląda, strona przechodzi test, ale wtedy cały tekst, strona na urządzeniach stacjonarnych, jest przesunięta w lewo, zamiast być wyśrodkowana

 

Strona: statystyka-pomoc.com

 

Styl css

 

a, abbr, acronym, address, applet, article, aside, audio, b, blockquote, big, body, center, canvas, caption, cite, code, command, datalist, dd, del, details, dfn, dl,

div, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, keygen, label, legend,

li, meter, nav, object, ol, output, p, pre, progress, q, s, samp, section, small, span, source, strike, strong, sub, sup, table, tbody, tfoot, thead, th, tr, tdvideo,

tt, u, ul, var {
background : transparent;
border : none 0;
font-size : 100%;
margin : 0;
padding : 0;
border : 0;
outline : 0;
vertical-align : top;
}
ul {
list-style : none;
}
blockquote, q {
quotes : none;
}
table, table td {
padding : 0;
border : none;
border-collapse : collapse;
}
img {
vertical-align : top;
}
embed {
vertical-align : top;
}
* {
border : none;
}
.col1, .col2, .col3, .cols {
float : left;
}
.col1 {
width : 512px;
margin-top : -40px;
}
.col2 {
width : 284px;
}
.cols {
width : 223px;
}
#page1 header {
height : 416px;
}
#page1 h1 {
padding : 23px 0 0 0;
}
#page1 #icons {
padding : 38px 5px 0 0;
}
#page1 #menu {
top : 122px;
}
#page1 {
background : url(../images/bg_top_repeat.jpg) top repeat-x #f3f3f3;
}
#page1 .body1 {
background : url(../images/bg_top.jpg) top center no-repeat;
}
#page1 .text1 {
padding : 129px 0 0 0;
}
#page1 .col1 {
margin-top : -50px;
}
#page4 .under {
padding-bottom : 8px;
margin-bottom : 30px;
}
#page5 .col2 .col_1 {
width : 72px;
float : left;
}
#page5 .col2 .col_2 {
width : 140px;
float : left;
}
#page5 .col1 .col_1 {
width : 105px;
float : left;
}
#page5 .col1 .col_2 {
width : 405px;
float : left;
}
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source,

video {
display : block;
}
mark, rp, rt, ruby, summary, time {
display : inline;
}
.left {
float : left;
}
.right {
float : right;
}
.wrapper {
width : 100%;
overflow : hidden;
}
.picture1 {
display : block;
float : right;
border : black solid 0;
}
.contact {
font-size : 15px;
}
.contact a {
text-decoration : none;
}
body {
background : url(../images/bg_top_repeat2.jpg) top repeat-x #f3f3f3;
border : 0;
font : 14px Arial;
text-align : justify;
color : #000;
line-height : 20px;
}
.css3 {
border-radius : 8px;
box-shadow : 0 0 4px rgba(0, 0, 0, 0.4);
position : relative;
}
.main {
margin : 0 auto;
width : 860px;
position : relative;
}
.body1 {
background : url(../images/Trzeciak.jpg) top center no-repeat;
}
.body2 {
background : url(../images/bg_top_repeat2.jpg) bottom repeat-x;
height : 99px;
}
.block {
height : 99px;
}
.extra {
min-height : 100%;
height : auto !important ;
height : 100%;
margin : 0 auto -99px;
}
body, html {
height : 100%;
}
a {
color : #628ba4;
text-decoration : underline;
outline : none;
}
a:hover {
text-decoration : none;
}
h1 {
font-size : 40px;
text-transform : uppercase;
line-height : 50px;
padding : 13px 0 0 0;
float : left;
font-weight : 400;
}
h2 {
font-size : 30px;
color : #3b5b70;
line-height : 36px;
font-weight : 300;
padding : 0 0 19px 0;
letter-spacing : -1px;
}
p {
padding-bottom : 20px;
text-align : justify;
}
.igorny {
vertical-align : super;
}
.idolny {
vertical-align : sub;
}
header {
height : 306px;
overflow : hidden;
}
#logo {
color : #3a5b70;
text-decoration : none;
}
#logo span {
color : #628ba4;
}
#icons {
float : right;
padding : 28px 5px 0 0;
}
#icons li {
float : left;
padding-left : 10px;
}
#menu {
position : absolute;
top : 102px;
left : -20px;
}
#menu li {
float : left;
padding-right : 5px;
}
#menu li a {
display : block;
font-size : 18px;
text-transform : uppercase;
text-decoration : none;
color : #fff;
position : relative;
line-height : 30px;
padding : 0 10px;
margin : 0 1px 1px 0;
}
#menu li a:hover, #menu #menu_active a {
color : #3a5b70;
border-radius : 6px;
background : url(../images/menu_bg.gif) top repeat-x;
border-bottom : 1px solid #3f5f74;
border-right : 1px solid #3f5f74;
margin : 0;
}
.text1 {
font-size : 30px;
line-height : 36px;
color : #3c596b;
padding : 119px 0 0 0;
font-weight : 400;
letter-spacing : -1px;
}
.text1 span {
display : block;
font-size : 40px;
color : #fff;
line-height : 50px;
margin-top : -12px;
}
header p {
font-size : 14px;
line-height : 20px;
color : #000;
padding : 14px 0 0 0;
width : 510px;
}
#content {
width : 100%;
overflow : hidden;
padding-top : 86px;
padding-bottom : 36px;
}
.inner_copy, .inner_copy a {
border : 0;
float : right;
background : #fff;
color : #f00;
width : 50%;
line-height : 10px;
font-size : 10px;
margin : -220% 0 0 0;
overflow : hidden;
padding : 0;
}
.pad_left1 {
padding-left : 64px;
}
.marg_left1 {
margin-left : 25px;
}
.marg_right1 {
margin-right : 25px;
}
.marg_right2 {
margin-right : 10px;
}
.pad_bot1 {
padding-bottom : 10px;
}
.pad_bot2 {
padding-bottom : 20px;
}
.pad_bot3 {
padding-bottom : 30px;
}
.marg_top1 {
margin-top : 8px;
}
.line1 {
background : url(../images/line_ver1.gif) 543px 0 repeat-y;
width : 100%;
float : left;
}
.line2 {
background : url(../images/line_ver2.gif) 255px 0 repeat-y;
}
.list1 li a {
padding-left : 9px;
background : url(../images/marker_1.gif) 0 6px no-repeat;
}
.font1 {
font-weight : bold;
padding-bottom : 4px;
}
.under {
background : url(../images/line_hor1.gif) bottom repeat-x;
padding-bottom : 14px;
margin-bottom : 13px;
}
.color1 {
color : #628ba4;
}
footer {
padding : 30px 0 33px 0;
text-align : center;
color : #4b5154;
font-size : 12px;
line-height : 18px;
width : 100%;
overflow : hidden;
}
footer a {
color : #7c8285;
}
#ContactForm {
margin-top : -5px;
}
#ContactForm p {
line-height : 21px;
padding-bottom : 9px;
}
#ContactForm a {
margin-left : 40px;
float : right;
}
#ContactForm .input {
width : 209px;
height : 15px;
border : #dadada solid 1px;
background : #fff;
padding : 2px 5px;
margin-bottom : 9px;
color : #000;
font : 13px Arial;
}
#ContactForm textarea {
overflow : auto;
width : 393px;
height : 304px;
border : #dadada solid 1px;
background : #fff;
padding : 2px 5px;
margin-bottom : 5px;
color : #000;
font : 13px Arial;
}
#cookie-warn a {
color : #D66E1A;
text-transform : uppercase;
float : right;
padding-right : 20px;
}
#cookie-warn p {
font-size : 12px;
color : #333;
}
 

 

Jestem laikiem w tych sprawach, więc liczę na pomoc.

[Hagen]

Zrób tak:

main {
margin : 0 auto;
max-width : 860px;
position : relative;
}

[huckfinn]

.main {
margin : 0 auto;
width : 860px;
position : relative;
}

Taka jest pierwotna wersja kodu, ale wtedy nie przechodzi testu Google, tekst trzeba przewijać na komórkach w poziomie

[Hagen]

Ale ja Ci nie podałem pierwotnej, zastąp pierwotną wersję kodu moim kodem.

 

A po za Tym rzucając okiem na CSS który wkleiłeś, masz porobione wszystko na sztywno. Przeczytaj sobie to:

https://kodcss.pl/kurs-css/lekcje/dzial-4/layout-html-css-dla-kazdej-rozdzielczosci

[zakręcony]

.main {

width : 860px;

}

jest różnica, przypatrz się

[huckfinn]

Witam

 

Rzeczywiście jest, teraz wszystko działa. Niestety nie znam się na tym zupełnie, stronę stworzył ktoś dawno temu na wzór jakiegoś szablonu i tylko poprawiam od czasu do czasu jak wypatrzę jakieś usterki. CSS sprawdziłem walidatorem i co mógł to poprawił, sam mam za mało umiejętności bym w tym grzebał.

Z linkiem się zapoznam przy odrobinię wolnego czasu, jeszcze raz dziękuję za pomoc.

 

Pozdrawiam

[huckfinn]

PS.

 

Przeczytałem, ale dla mnie to ciemna magia, co mógłbym jeszcze usprawnić w kodzie html lub ewentualnie w css? Na przykład w wersji mobilnej tekst wychodzi poza margines ekranu.

[Hagen]

Mógłbyś jeszcze.... zlecić to komuś i mieć z głowy

[huckfinn]

Tak, ale w takim wypadku to już lepiej postawić lepszą, responsywną stronę, niż dokładać do tej.

[Deser11]

Zostaw CSS takiego jak miałeś wcześniej i dołóż @media queries. Wtedy nie zespujesz sobie standardowego css'a, a możesz bawić się z mobilną wersją

[Hagen]

Zostaw CSS takiego jak miałeś wcześniej i dołóż @media queries. Wtedy nie zespujesz sobie standardowego css'a, a możesz bawić się z mobilną wersją

 

Za pomocą @media tylko się dopieszcza stronę, która sama w sobie powinna być responsywna.

[Deser11]

 

Zostaw CSS takiego jak miałeś wcześniej i dołóż @media queries. Wtedy nie zespujesz sobie standardowego css'a, a możesz bawić się z mobilną wersją

 

Za pomocą @media tylko się dopieszcza stronę, która sama w sobie powinna być responsywna.

 

 

Czyli 90% stron powinno przejść na responsywność, aby dostosować się do mobilnych? To byłby bezsens. (no chyba, że dla firm tworzących strony )

 

Po co mam tworzyć nową stronę, z nowym layoutem (bo najczęściej nie zrobimy reposnywnej z udziwnonym, aktualnym wyglądem), jeśli mogę przestawić 4-5 elementów , przy pomocy @media queries..

 

A już tym bardziej, że od strony pozycjonowania jest to bez różnicy, bo Google patrzy na swoje udziwione wymagania, a nie na to czy coś jest wrzucone w @media czy nie..

[jimmi]

offtop Panowie trochę luzu, postów ubyło.