Jump to content
Paul Sack

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

Recommended Posts

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

Falls ja – wie ?

Edited by Paul Sack (see edit history)

Share this post


Link to post
Share on other sites

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).

  • Like 1

Share this post


Link to post
Share on other sites

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 ?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.


post-1115147-0-48858800-1485363146_thumb.png

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

@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 by rictools (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

"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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More