+ Antworten
Ergebnis 1 bis 6 von 6

Thema: Protostar row-fluid unterteilen (Webseite Desktop/Smartphone)

  1. #1
    Neu an Board
    Registriert seit
    10.04.2018
    Beiträge
    5
    Bedankte sich
    4
    Erhielt 0 Danksagungen
    in 0 Beiträgen

    Standard Protostar row-fluid unterteilen (Webseite Desktop/Smartphone)

    Guten Tag/Nacht

    ich passe Protostar an. Folgende Anforderungen:
    - in class row-fluid soll SideNavi (Position-8) und Content nebeneinander liegen
    - Content beginnt bündig unterhalb von Headerbild und geht bis rechten Rand

    Mit der Webseite Desktop bin ich zufrieden. Es sieht so aus: Seite

    Das Problem liegt in der Smartphone-Ansicht. Ich bringe es nicht hin, die "div class row-fluid" so zu unterteilen, dass die obigen Design-Wünsche eine lesbare Smartphone-Darstellung nicht ruinieren.

    Vielen Dank für Nachhilfe
    Klingend Bb
    Geändert von Klingend Bb (13.04.2018 um 22:25 Uhr)

  2. #2
    Gehört zum Inventar Avatar von christine2
    Registriert seit
    08.10.2010
    Beiträge
    5.390
    Bedankte sich
    438
    Erhielt 1.930 Danksagungen
    in 1.831 Beiträgen

    Standard

    Hallo,

    puh :-) kommt ja von hier, user.css, Zeile43:

    Code:
    .row-fluid .span9 {
    padding-left: 120px;
    }
    aber das weißt Du ja selbst. Kannst folgendes probieren:

    Obiges löschen, dann:

    Code:
    @media (min-width: 500px) {
    main#content {
    padding-left:120px;        
    }    
    }
    na ja, so in etwa. Mit den media queries hab ich es nicht so :-) Und hier:

    Code:
    .body .container {
    border-radius: 3px;
    padding-right: 0px;
    }
    klebt der Text so dran. Würde ich 2. Zeile ändern oder löschen.

    Liebe Grüße
    Christine

  3. Erhielt Danksagungen von:


  4. #3
    Neu an Board
    Registriert seit
    10.04.2018
    Beiträge
    5
    Bedankte sich
    4
    Erhielt 0 Danksagungen
    in 0 Beiträgen

    Standard

    Herzlichen Dank Christine, hat wunderbar auf Anhieb geklappt! Jetzt muss ich noch verstehen was passiert ist (@media und so ....)
    NB: Das padding-right darf ich nicht wegnehmen. Im Designvorschlag muss das so rechts kleben... jä nu
    Lieber Gruss
    Ruedi

  5. #4
    Gehört zum Inventar Avatar von christine2
    Registriert seit
    08.10.2010
    Beiträge
    5.390
    Bedankte sich
    438
    Erhielt 1.930 Danksagungen
    in 1.831 Beiträgen

    Standard

    Hallo Ruedi,

    Soweit ich mich erinnern kann: Du hattest links die vertikalen Menüs (span3), also die sidebar. Daneben: main id content (span9).

    Siehe 1. Code: Hast Du padding-left ... verwendet. Responsive ist das dann natürlich nicht mehr.
    Siehe auch hier: http://bj.zemplate.com/protostar-res...onsive-styling
    Die spans haben ja vorgegebene % Breiten.

    Der Abstand zwischen linken Menüs und dem content war aber gewollt (vorgegeben) :-) - deswegen dann eben der Vorschlag mit den media queries.

    Mehr dazu als Nachtlektüre: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    http://www.intensivstation.ch/css3/media-queries/

    und zu den breakpoints vom Protostar: http://bj.zemplate.com/protostar-res...rotostar-media

    Da probierte ich es halt mit den 500px :-) Du kannst es ja noch anders (siehe Links) ausprobieren.

    Liebe Grüße
    Christine

  6. Erhielt Danksagungen von:


  7. #5
    Neu an Board
    Registriert seit
    10.04.2018
    Beiträge
    5
    Bedankte sich
    4
    Erhielt 0 Danksagungen
    in 0 Beiträgen

    Standard

    Liebe Christine
    meine CSS - Sprünge sind lange her... Da scheint viel passiert zu sein (w3schools ist ja ein super Link... Mediaqueries schein mir etwas ähnliches wie Print querries)
    Vielen Dank. So bleibt's spannend
    lieber Gruss
    Ruedi

  8. #6
    Gute Seele des Boards Avatar von time4mambo
    Registriert seit
    11.12.2006
    Ort
    76646 Bruchsal
    Alter
    62
    Beiträge
    19.659
    Bedankte sich
    767
    Erhielt 4.016 Danksagungen
    in 3.772 Beiträgen

    Standard

    Mit Media-Querries kannst du auf verschiedene Bildschirmgrößen reagieren und damit die Site für alle mobilenen Endgeräte anpassen. Mit einer print.cee lediglich den AUsdruck beeinflussen. Das ist schon noch etwas anderes.,,


    Axel
    Joomla- und Office-Tutorials: time4joomla
    Deutschsprachige SEBLOD-Community
    CCK SEBLOD-Das Handbuch als kostenloses Onlinebook

+ Antworten

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein