Neu Shoplogo auf Desktop links - Mobil über volle Breite - wie machbar?

[JohnFrea]

Hi,

wir möchten in Shop 4.06 unser Shoplogo auf Desktop und Tablets ganz normal links anzeigen. Unterschreitet die auflösung eine gewisse Breite (Handys), soll das Logo jedoch über die gesamte Breite angezeigt werden und die Suchbox darunter angezeigt werden.

Mit dem Evo Standard funktioniert es einfach nicht gut. Aktuell nutzen wir schon folgende Veränderung aus dem Forum.

@media only screen
and (max-width : 520px) and (orientation : landscape)
{#logo a img {
  max-height: 50px;
}}

@media only screen
and (max-width : 320px) and (orientation : portrait)
{#logo a img {
  max-height: 40px;
}}

@media only screen
and (min-width : 750px)
{#logo a img {
  max-height: 90px;
max-width: 400px;
}}

@media only screen
and (min-width : 1200px)
{#logo a img {
  max-height: 150px;
max-width: 650px;
}}

 

[Point13]

Aktuell wird die Breite von Bootstrap bestimmt (col-xs).

Eine Möglichkeit wäre es die Breite vom Logo und von der Suchbox auf jeweils 100% zu setzen:

#logo, #shop-nav {
    width: 100%;
}

Danach das Logo auf 100%

#logo a img {
    width: 100%;
    max-height: none;
}

 

[JohnFrea]

Danke für den Ansatz - funktioniert schon ganz gut.
Aktuell habe ich in der theme.less dann

@media only screen
and (max-width : 520px)
{
    #logo, #shop-nav {
        width: 100%;
    }
    #logo a img {
        width: 100%;
        max-height: none;
    }
}

@media only screen
and (max-width : 320px)
{
    #logo, #shop-nav {
        width: 100%;
    }
    #logo a img {
        width: 100%;
        max-height: none;
    }
    
}

@media only screen
and (min-width : 750px)
{#logo a img {
  max-height: 90px;
max-width: 400px;
}}

@media only screen
and (min-width : 1200px)
{#logo a img {
  max-height: 150px;
max-width: 650px;
}}