[gelöst] Breite des default template auf 100%

[Paul Sack]

besteht die Möglichkeit, die Breite des default template (PS 1.6.1.11), auf 100% der Bildschirmbreite auzudehnen ?

Falls ja – wie ?

Edited February 2, 2017 by Paul Sack (see edit history)

[rictools]

Du kannst in der global.css (im Ordner deines Themes) für die größte Bildschirmgröße für .container max-width: 99%; definieren (bei mir Zeile 1013).

[Paul Sack]

Meine global.css sieht aus wie folgt:
 

.container > .navbar-header,
.container > .navbar-collapse {
  margin-right: -15px;
  ; }
  @media (min-width: 768px) {
    .container > .navbar-header,
    .container > .navbar-collapse {
      margin-right: 0;
      margin-left: 0; } }

Soll ich die Zeile 2398
   @media (min-width: 768px) {
durch
   @media (max-width: 99%) {
ersetzen ?
Müsste nach Änderungen der Cache gelöscht werden ? Falls ja wie ?

[Whiley]

besteht die Möglichkeit, die Breite des default template (PS 1.6.1.11), auf 100% der Bildschirmbreite auzudehnen ?

Falls ja – wie ?

 

Poste mal einen Screenshot mit Infos wo etwas angepaßt werden soll.

Das Default-Template solle eigentlich per default die volle Bildschirmbreite ausnutzen (du siehst es am Header u. am Footer)

 

Grüsse

Whiley

[Paul Sack]

Das default template gibt den Content scheinbar zentriert aus (grüne Linie) und lässt links und rechts Platz frei. Eine Ausdehnung auf 100% der Bildschirmbreite wäre mein Ziel.

[Shad86]

der @media Befehl ist dafür um bei einer Bestimmten Bildschirmbreite aktionen aus zu führen bzw. CSS Code zu ändern.

Irgendwas ist 20px breit und auf dem Handy nur 10px beispielsweise.

 

Wenn möglich vielleicht sogar einne Link posten dann könnte man direkt reingucken.

[Shad86]

Ist sicherlich möglich aber ist sicherlich einiges an Arbeit, du siehst ja wie viele @media Befehle so schon drin sind um alles gut aussehen zu lassen wenn der Bildschirm kleienr wird als der Standard. Das selbe müsstest du dann noch machen für größer als den Standard.

[rictools]

@Whiley

Beim Default-Template ist der Inhaltsbereich auf maximal 1170 Pixel festgelegt, so breit wie der Banner ganz oben.

 

Meine global.css sieht aus wie folgt:
 

.container > .navbar-header,
.container > .navbar-collapse {
  margin-right: -15px;
  ; }
  @media (min-width: 768px) {
    .container > .navbar-header,
    .container > .navbar-collapse {
      margin-right: 0;
      margin-left: 0; } }

Soll ich die Zeile 2398
   @media (min-width: 768px) {
durch
   @media (max-width: 99%) {
ersetzen ?
Müsste nach Änderungen der Cache gelöscht werden ? Falls ja wie ?

Also was bei mir in Zeile 1013 ist, ist bei dir bestimmt nicht in Zeile 2398 ... (sondern irgendwo in der Nähe).

 

Du mußt die Anweisung für .container ändern, die obige Anweisung bezieht sich (u. a.) auf .container > .navbar-header, das heißt auf eine Navigationsleiste innerhalb des Containers und nicht auf den gesamten Container. In diesem Bereich wird für diese Navigationsleiste gar keine Breite festgelegt, die min-width bewirkt, daß sich diese Anweisungen nur auf eine Bildschirmanzeige mit einer Breite von mindestens 768px (also normaler Desktop) bezieht, aber nicht auf kleine Tablets etc. Ggf. solltest du dich mit den Grundlagen von CSS beschäftigen.

 

Oder - wie schon mehrfach geschrieben - liefere uns einen Link (nicht nur ein Foto!) zu deiner Seite (schalte vorher alle Caches aus), dann können wir dir konkretere Anweisungen geben. Gehe aber davon aus, daß es mit dieser einen Änderung nicht getan sein wird, wenn die Seite vernünftig aussehen soll.

Edited January 26, 2017 by rictools (see edit history)

[Whiley]

Hallo,

 

ok du meinst also den Bereich des Templates zwischen Header und Footer!

Suche in deiner global.css (ca  Zeile 834)

 

@media (min-width: 1200px) {
.container {
    max-width: 1170px;
}

 und ändere das in:

@media (min-width: 1200px) {
.container {
    max-width: 100%;
}

 

Grüße

Whiley

[NSN]

Bin grad zufällig auf ein Modul gestoßen welches dir behilflich sein könnte.

https://catalogo-onlinersi.net/en/home/478-responsive-fluid-layout.html

 

Ich möchte jedoch anmerken dass ich es selber nicht probiert habe.

[Paul Sack]

"Wenn möglich vielleicht sogar einne Link posten dann könnte man direkt reingucken."

@Shad86: Ich entwickle den Shop zunächst auf meinem lokalen Rechner. Ein Link ist leider nicht möglich.

 

 

@media (min-width: 1200px) {
.container {
    max-width: 100%;
}

@rictools, @Whiley: funktioniert auf Anhieb -  erfordert erwartungsgemäß einiges an Nacharbeit ...

 

@NSN: das Responsive Fluid-Layout funktioniert einwandfrei ! Es erweitert Bootstrap auf 100% Bildschirmbreite.

Danke an Alle
Beste Grüße Paul