gelöst Startseite Ränder Hauptbereich

Thema wurde von anette_nau, 28. September 2022 erstellt.

  1. anette_nau

    anette_nau Aktives Mitglied

    Registriert seit:
    28. Januar 2022
    Beiträge:
    31
    Danke erhalten:
    7
    Danke vergeben:
    3
    Hallo, Community,

    ich würde gerne auf der Startseite die Ränder des Hauptbereiches links und rechts reduzieren, also den Abstand zum Bildschirmrand.
    Ich habe schon Gambio Shops (Honeygrid) gesehen, deren Hauptbereich schmalere Seitenränder hat. Also müsste es irgendwie gehen. Aber ich finde dazu nichts. Im Anhang eine Screenshot.
    Kann jemand helfen ?

    Zwischenablage02.png Danke !!

    Shop
     
  2. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.463
    Danke erhalten:
    551
    Danke vergeben:
    211
    Das müsste hier gehen:
    StyleEdit (Theme bearbeiten), auf deiner Startseite ganz rechts, neben dem Wort Sektion auf den Stift klicken und dann "Inhalt wrappen" ausschalten. Und das dann bei allen Sektionen die du auf der Startseite hast.
    upload_2022-9-28_14-43-30.png
     
  3. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.463
    Danke erhalten:
    551
    Danke vergeben:
    211
    kleiner Tipp: wenn man in deinem Shop oben bei der Weltkugel auf Englisch umstellt, erscheint die Grundeinstellung von Gambio. Da würd ich "Englisch" lieber ausschalten. :)
     
  4. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.463
    Danke erhalten:
    551
    Danke vergeben:
    211
    #4 Anonymous, 28. September 2022
    Zuletzt bearbeitet: 28. September 2022
    Doch, Rand hat sie dann immer noch. :)

    Sorry, Devil hat Recht.
    Du kannst auch nur die Breite vom Shop ändern.:)

    Nachtrag: ich ließ mich von der Vorschau im StyleEdit täuschen. Denn wenn man da die px in der Shopbreite erhöht, wird die Anzeige schmäler. Nachdem speichern und direkt im Shop anschauen, sieht man aber, dass es tatsächlich breiter geworden ist. :) Danke Devil.

    Die Breite des Shops änderst du hier:
    Theme bearbeiten, Bereiche, allgemein, Layout, Maximalbreite
     
  5. anette_nau

    anette_nau Aktives Mitglied

    Registriert seit:
    28. Januar 2022
    Beiträge:
    31
    Danke erhalten:
    7
    Danke vergeben:
    3
    DANKE. Das war schon mal ein super Tipp ! Was man alles übersehen kann ...
     
  6. anette_nau

    anette_nau Aktives Mitglied

    Registriert seit:
    28. Januar 2022
    Beiträge:
    31
    Danke erhalten:
    7
    Danke vergeben:
    3
    Das habe ich gemacht, und der Hauptbereich wird tatsächlich breiter. Sogar quasi Full-width, wenn man will.
    Aber leider nur in der Desktop-Ansicht. Bei der Smartphone-Ansicht tut sich nichts ... Tablet muß ich noch probieren.
    Wie kann man das jetzt für die Smartphone-Ansicht auch noch hinbekommen?
    (Inhalt wrappen ein- oder ausschalten verändert das lleider auch nicht.)

    Danke für die Mühe, aber bei diesem Punkt steh ich echt auf dem Schlauch.
     
  7. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.463
    Danke erhalten:
    551
    Danke vergeben:
    211
    upload_2022-9-29_17-11-6.png

    so sieht die mobile Ansicht jetzt aus. Ist es bei dir schmäler?
     
  8. anette_nau

    anette_nau Aktives Mitglied

    Registriert seit:
    28. Januar 2022
    Beiträge:
    31
    Danke erhalten:
    7
    Danke vergeben:
    3
    Nein, genauso. Aber bei der Konkurrenz ist es besser. Da füllt das gleiche Design den Bildschirm links rechts fast ganz aus. Sieht für mich smarter aus. Irgendwie will ich dahin kommen. S. Screenshot.
    Ich teste jetzt erstmal eure guten Ratschläge voll aus. Vllt. wirds ja.

    VIELEN DANK !!
     

    Anhänge:

  9. anette_nau

    anette_nau Aktives Mitglied

    Registriert seit:
    28. Januar 2022
    Beiträge:
    31
    Danke erhalten:
    7
    Danke vergeben:
    3
    OK, ich schau mir das mal an. VIELEN DANK für den Tipp !!

    Dachte nicht, daß ich neben Shopbetreiber auch noch Programmierer werde ... o_O
     
  10. anette_nau

    anette_nau Aktives Mitglied

    Registriert seit:
    28. Januar 2022
    Beiträge:
    31
    Danke erhalten:
    7
    Danke vergeben:
    3
    Bei dem ersten musst du 2 Sachen bearbeiten.
    1.
    Den Anhang 36315 betrachten
    2.
    Den Anhang 36316 betrachten [/QUOTE]

    Ich sehe die Paddings im Code. Wenn ich jetzt noch wüsste, wie die wegbekomme ... Rahmen geht ja über den SE, Paddings nicht.
    Wahrscheinlich eigene Klasse erstellen ? Oder gibt es einen einfacheren Weg ?
     
  11. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Du musst nur die Klasse, die den Padding-Wert enthällt, im eigenen CSS im Style Editor eintragen - mit Deiner Änderung.

    so ähnlich:
    .name der Klasse{
    paddin-left: 5px;
    paddin-right: 5px;
    }
     
  12. anette_nau

    anette_nau Aktives Mitglied

    Registriert seit:
    28. Januar 2022
    Beiträge:
    31
    Danke erhalten:
    7
    Danke vergeben:
    3
    Hallo, zusammen,

    dank eurer Hilfe und Denkanstöße habe ich das jetzt folgendermaßen gelöst:

    Mir ist aufgefallen, daß Sektionen mit Bild-Widget auf kleinen Bildschirmen große Seitenrändern mitbringen, Sektionen mit html-Widget aber nicht. Also habe ich jede Sektion der Startseite eben komplett per html-Widget konstruiert.

    Als Grundlage habe ich folgenden Code genommen. div-Blöcke kann man 1 oder mehrere einbauen, man muß dann eben nur mit den cols die gewünschte Darstellung auf verschiedenen Bildschirmen kontrollieren.

    <div class="row cat-boxes">
    <div class="col-xs-6 col-sm-6" style="background: #FFFFFF;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-style: solid;
    border-color: #FFFFFF;
    padding-top: 0px;
    padding-right: 5px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;">
    <a href="https://www.outdoo.store/specials.php"><img class="img-responsive" src="xyz.jpg" /></a>
    </div>
    <div class="col-xs-6 col-sm-6" style="background: #FFFFFF;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-style: solid;
    border-color: #FFFFFF;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 5px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;">
    <a href="https://www.outdoo.store/de/Laufen/"><img class="img-responsive" src="utr.jpg" /></a>
    </div>
    </div>

    Jetzt ist die Startseite in der Smartphone- Ansicht (unsere Seite wird hauptsächlich mobil genutzt) schön kompakt. Wie bei der Konkurrenz, an der wir uns orientieren ... ;). Man muß ja das Rad nicht immer neu erfinden.

    www.outdoo.store
     
  13. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Tipp:
    gib der Klasse einen Namen, dann kannst Du den style dazu im eigenen css ablegen und musst den nicht bei jedem Widget einfügen, sondern immer nur die selbe Klasse angeben.