• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Responsywny background

0 głosów
41 wizyt
pytanie zadane 27 maja w HTML i CSS przez Apper97 Obywatel (1,330 p.)

Cześć!

Mam pewien problem ze zrobieniem projektu, na szablonie od grafika dostałem do pocięcia stronke.

Szerokość strony którą dostałem w mockach wynosi 1440px. Sekcja która mnie interesuje wynosi 840px szerokości oraz 600px wysokości, obok niej znajduje sie sekcja z formularzem która zjamuje 600px x 600px. W pierwszej sekcji(większej) znajduje się na całym tle(w całym jakby divie) obrazek, z prawej storny-jak już mówiłem, w drugiej sekcji jest formularz. Pytanie brzmi, jak mam to rozgryźć responsywnie, pracuje na dużym monitorze, poza tym ktoś może odpalić stronę na telewizorze. Px perfect odpada. Rzucać to wszystko na oko, czy jest jakieś spoko rozwiązanie? Jakoś policzyć coś? ;p HTML dotychczas wygląda tak: 

<header class="header">
            <div class="header__left"></div>
            <div class="header__right">
                <div class="header__content-container"></div>
            </div>
</header>

css'y natomiast wyglądają w ten sposób: 

.header {
    background: $color-main;
    height: calc(100vh - 70px);
    display: flex;
}
.header__left {
    background: url('../../assets/mountains.svg')no-repeat;
    background-size: 100%;
    flex:2.4;
}
.header__right {
    flex:1.7;
    padding:100px;
}

Wiem, słabe rozwiązanie, dlatego też do was piszę, macie jakieś propozycje jak ugryźć to najlepiej, żeby od razu podpasowało pod rwd?

Pozdro!

1 odpowiedź

+1 głos
odpowiedź 27 maja przez dawid6512 Gaduła (3,630 p.)

jesli dobrze rozumiem to mozesz uzyc

% lub okreslac dla danego przedzialu rozdzielczosci wymiary za pomoca px uzywajac  np

@media only screen and (max-width: 1600px) and (min-width:1366px) {

   div{
     width:1440px;
    }

}

 

Podobne pytania

0 głosów
4 odpowiedzi 90 wizyt
0 głosów
1 odpowiedź 149 wizyt
pytanie zadane 31 grudnia 2018 w HTML i CSS przez Strugaczka Początkujący (260 p.)
0 głosów
1 odpowiedź 80 wizyt
pytanie zadane 15 października 2018 w HTML i CSS przez eric9972 Użytkownik (530 p.)
Porady nie od parady
Zadając pytanie postaraj się o szczegółowe opisanie problemu oraz udostępnienie wszystkich istotnych informacji (kody źródłowe, zrzuty ekranu itp.).Opisanie problemu

66,384 zapytań

113,133 odpowiedzi

239,497 komentarzy

46,640 pasjonatów

Przeglądających: 142
Pasjonatów: 1 Gości: 141

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...