Problem z responsywnością logo.

[Kris_74]

Witam, mój problem polega na tym, że do szablonu zakupionego na stronie Presty dodany został własny logotyp dużo szerszy niż zalecany w danym szablonie. W wyniku tych zmian logo nie dopasowuje się do urządzenia mobilnego.

Co w takiej sytuacji można zrobić nie zmieniając rozmiarów oryginalnego logotypu.

 

[Daresh]

Podziałać w stylach sklepu, ustawić może jakiś max-width zależny od rozdzielczości. Ciężko powiedzieć bez zobaczenia sklepu.

[Kris_74]

Link do sklepu

[endriu107]

Możesz spróbować każde width:988px zamienić na max-width:988 px i dodać wtedy width:100% to powinno zadziałać.

[Kris_74]

Te zmiany mam wprowadzić w pliku global.css

Jeśli tak to po zmianie wygląda to tak:

 

#new_header_logo
{
    margin:0 auto; max-width: 988px;
    height: 209px;
}
#new_header_logo div
{
    float: left;
    max-width: 988px;
    height: 209px;
}    
}
#header_logo {
    position: absolute;
    left:0;
    top: 0px;
    z-index:1;
    background:url(../img/Logo_bg.png) no-repeat scroll 0 0 transparent;
}
#header_logo img{position:relative;top:25px;}
#header_right {
    position:relative;
    float: right;
    margin-bottom:8px;
    width:100%;
    height:114px;
}

 

Tylko w którym miejscu mam dodać width: 100%

[endriu107]

Wszędzie tam gdzie masz max-width 988.

[Kris_74]

Mam jeszcze jedno pytanie, żeby logo zmieniało proporcje na mniejsze w zależności od rozdzielczości użytego ekranu, czy nie należałoby zrobić coś z parametrem height ?

[Kris_74]

Dzięki, ale to nie zadziałało. Niestety logo pozostaje ciągle w oryginalnym rozmiarze.

Być może coś robię źle, bo nie jestem fachowcem, ale mimo wszystko dziękuję za chęć pomocy.

[endriu107]

To dodaj do css:

 

img.logo {
    width: 100%;
    max-width: 988px;
    height: auto;
}

a to:

 

#new_header_logo {
    margin: 0 auto;
    width: 988px;
    height: 209px;
}

#new_header_logo div {
    float: left;
    width: 988px;
    height: 209px;
}

 

 

zamień na to:

 

#new_header_logo {
    margin: 0 auto;
    max-width: 988px;
    width: 100%;
    height: 209px;
}

#new_header_logo div {
    float: left;
    max-width: 988px;
    height: 209px;
    width: 100%;
}

[Kris_74]

Dzięki wielkie, udało się, ale mam jeszcze dwa zapytania.

Po ustawieniu responsywności logo w widoku pionowym na telefonie między logo, a wyszukiwarką na mojej witrynie jest spora przerwa (widok1), czy dałoby się jakoś ustawić parametr, który zmniejszałby ten dystans w widoku mobilnym? 

 

 

 

Problem drugi to widok strony koszyka. W układzie pionowym karta produktu, wyświetla się podwójnie bezpośrednio jedna pod drugą (widok2). W układzie poziomym na telefonie wszystko wraca do normy.  Mogę liczyć na podpowiedź?