/ / Usuwanie responsywnych elemetów - css, tumblr

Usuwanie responsywnych elemetów - css, tumblr

Stronie internetowej: http://jimouk.tumblr.com

Próbuję usunąć kilka odpowiedzielementy z motywu Tumblr, który pobrałem. Stworzyłem kilka efektów najazdu, a kiedy strona ma mniej niż 1024 piksli, to je kasuje. Nie podoba mi się też, jak to wygląda, a Tumblr ma swój własny temat mobilny.

To właśnie robi, czego nie chcę: http://i.stack.imgur.com/kK81j.jpg

Chciałbym, żeby pozostała taka sama bez względu na rozdzielczość ekranu. Jeśli wygenerowałby pasek przewijania powyżej 1024 pikseli, byłby jeszcze lepszy, zamiast układać menu na górze zawartości.

Istnieje wiele elementów @media CSS, którePoprawiłem się i próbowałem się całkowicie usunąć, ale żaden z nich nie radzi sobie z tym problemem, ponieważ przez całe życie nie mogę się zorientować, co powoduje, że zawartość układa się w stos, gdy ekran spada poniżej 1024 pikseli.

Każda rada byłaby doceniona.

Odpowiedzi:

0 dla odpowiedzi № 1

Trudno ci doradzić bez ponownego pisaniawszystkie CSS, aby pokazać, jak to zrobić. Przyjrzałem się źródłu, a motyw jest "mobilny-pierwszy" (tj. Domyślny układ to układ mobilny, a zapytania o media rozszerzają kod CSS, aby zmienić układ, gdy okno robocze jest szersze). Możesz zobaczyć, co mam na myśli tutaj, z pojemnikiem mieszczącym twoje posty na blogu:

.the-posts {
float: left;
clear: both;
width: 100%;
position: relative;
margin-top: 30px;
}
@media only screen and (min-width: 768px) {
.the-posts {
margin-top: 40px;
}
}
@media only screen and (min-width: 1024px) {
.the-posts {
float: right;
width: 560px;
margin-top: -88px;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.2s ease-in-out 0.2s;
-moz-transition: all 0.2s ease-in-out 0.2s;
-o-transition: all 0.2s ease-in-out 0.2s;
transition: all 0.2s ease-in-out 0.2s;
transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
.the-posts.ready {
opacity: 1;
visibility: visible;
}
}

Tak więc, gdy szerokość okna przeglądarki przekracza 1024 piksele, to .the-posts element jest przesuwany na prawo od ekranu.

Zamiast tego powinieneś zastąpić domyślne .the-posts Reguły CSS z regułami pulpitu i usuń wszystkie reguły zapytań o media:

.the-posts {
float: right;
width: 560px;
margin-top: -88px;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.2s ease-in-out 0.2s;
-moz-transition: all 0.2s ease-in-out 0.2s;
-o-transition: all 0.2s ease-in-out 0.2s;
transition: all 0.2s ease-in-out 0.2s;
transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}

Trzeba powtórzyć to ćwiczenie także dla innych elementów.