Bannergröße bei Smartphones

[macfli]

Hallo, auf einem Desktop-Computer sieht der Kopfbereich meines Shop's so aus (Bild 1), und auf meinem Smartphone ist alles ein wenig 'verrutscht' (Bild 2).

Meine Frage ist nun, wie passe ich die Größe des Banners in Bild 2 'NUR für Mobil-Phones' so an daß es in die Lücke zwischen Logo und Suchfeld passt?

Hat da jemand eine Idee, oder hat jemand so etwas schon mal gemacht?

Danke schon mal...

 

mf.

[macfli]

Nachtrag: Es soll in die Lücke zwischen Logo und Kundenanmeldung...

mf.

[rictools]

Per Untersuchen-Funktion im Browser sehe ich, daß sich das Banner zusammen mit dem Suchfeld in einem gemeinsamen DIV befindet, du müßtest dann also wohl die Position des Banners verändern.

[macfli]

Hi, ich habe das Banner-Modul an eine andere Stelle verschoben -> Design / Positionen / displayTop (Bild). Gibt es bei Prestashop nicht sowas wie beim css ->
 

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container { width: 80%; }

...??? Sowas in der Art.

Denn ich will das Banner schon da lassen wo es ist, eben nur bei der mobil-Version etwas kleiner. Denn es hat ja auch eine Klick-Funktion, und die sollte da oben bleiben. Ich denke, wenn es kleiner ist dann rutscht es 'von alleine' dahin, also nach oben.

mf.

ShopTWO. -> https://shoptwo.softwerk-ost.de

[rictools]

Du hast zwei Elemente (Banner und Suchfeld) in einem DIV-Element die in der Mobilversion getrennt werden sollen, das funktioniert nicht per CSS.

Eine Navigation (Menuleiste) gibt es bei dir auf der Startseite überhaupt nicht? Man soll seine Kunden nicht unnötig rätseln lassen (es sei denn man hat ein Quiz und nicht einen Shop ...).

Edited December 21, 2021 by rictools (see edit history)

[SchmidtSon]

Moin also ich kann dir da nur empfehlen das ganze direkt über die header.tpl selbst zu schreiben und dort das Banner Modul anzeigen zu lassen. Wie z.B.: https://www.derklempnerpeter.de damit kannst du dann die Postitionen besser beeinflussen, denn ich glaube der Hook displayTop befindet sich nur in einem Div und das funktioniert dann semi gut eben wie rictools das bereits beschreibt.

Das allerbeste ist, wenn du einen neuen hook registrierst und diesen dort oben positionierst, dann kannst du das ganze auch mit einer Modulposition versehen und es dann dieser zuweisen, um die volle kontrolle auch über das Backend zu erhalten.

Hier ein Link zur Beschreibung wie du einen Hook registrierst:

https://devdocs.prestashop.com/1.7/modules/concepts/hooks/#hooks

Besten Gruß

 

[JBW]

8 hours ago, rictools said:

Du hast zwei Elemente (Banner und Suchfeld) in einem DIV-Element die in der Mobilversion getrennt werden sollen, das funktioniert nicht per CSS.

Außer du fügst den Banner in beide DIVs ein und versteckst den einmal in der Desktop und einmal in der Mobil version. CSS kannst du in der custom.css Datei deines Themes definieren

[macfli]

Hallo Leute, Sorry das ich so spät antworte, aber z.Z. ist alles ein wenig viel. Der Shop, Familie und Weihnachten! Habe kaum Zeit das mit dem DIV auszuprobieren. Können wir diesen Thread nächste Woche fortsetzen? Also bitte diesen Thread noch nicht beenden...

Frohe Festtage an alle...

mf.

[rictools]

Threads bleiben hier grundsätzlich offen. Frohe Weihnachten!