Contao-Camp 2024
Ergebnis 1 bis 20 von 20

Thema: [subcolumns] responsive CSS?

  1. #1
    Contao-Fan
    Registriert seit
    12.11.2009.
    Ort
    Portugal
    Beiträge
    619

    Standard [subcolumns] responsive CSS?

    hey!

    Hat schon jemand von euch subcolumns eingesetzt ein einem responsive design?
    Dh. ein CSS gebaut dass die Columns dann zu keinen Columns mehr macht bei kleineren mediaqueries?
    Gibt es da schon etwas vorgefertigtes vielleicht?

    Danke
    Schönen Tag
    Lg Karo

  2. #2
    Contao-Yoda Avatar von MacKP
    Registriert seit
    15.06.2009.
    Ort
    Duisburg
    Beiträge
    13.292
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hallo karo,
    da die von yaml sind, kannst du dir das da auch mal anschauen. Da gibt es 2 Klassen, die man benutzten kann um auf Tablet und Smartphone oder nur auf Smartphone die Spalten untereinander anzuordnen. Das kann man sich selber dann auch so anpassen, das es ohne diese Klassen einfach automatisch überall passt.

    Viele Grüße
    Contao Pool | C-C-A | MetaModels | [Internetseite -> Mediendepot Ruhr]
    [Arbeitet bei -> Paus Design & Medien]
    "I can EXPLAIN it to you, but I can't UNDERSTAND it for you."

  3. #3
    Contao-Fan
    Registriert seit
    12.11.2009.
    Ort
    Portugal
    Beiträge
    619

    Standard

    danke für die info, schau mir das dort an

  4. #4
    Contao-Nutzer
    Registriert seit
    06.09.2012.
    Beiträge
    92

    Standard

    hallo,

    wie gehe ich genau vor, um die subcolumns bei mobiler Darstellung untereinander darsetellen zu können? Ich finde die Klassen nicht? Hast du die Lösung gefunden karo?

  5. #5
    Contao-Fan
    Registriert seit
    12.11.2009.
    Ort
    Portugal
    Beiträge
    619

    Standard

    Hey Herbert!
    Schau mal auf http://www.yaml.de/docs/index.html#yaml-grids udn etwas runterscroll zu Responsive Grids
    füge das zu deinem CSS hinzu. Ich musste die klassen etwas anpassen weil es so nicht ganz gepasst hat

    Das ist aus meinem CSS
    Code:
    	
    	/***** YAML SPALTEN ***********/
    	/* linearization for grid module */
    	  .linearize-level-1,
    	  .linearize-level-1 > [class*="colset"],
    	  .linearize-level-1 > [class*="col_"]  /*hinzugefügt*/
    	  
    	   {
    	    display: block;
    	    float: none;
    	    padding: 0;
    	    margin: 0;
    	    width: 100% !important;
    	  }
    	  /* reset defined gutter values */
    	  .linearize-level-1 > [class*="ym-g"] > [class*="ym-gbox"] {
    	    overflow: hidden; /* optional for containing floats */
    	    padding: 0;
    	    margin: 0;
    	  }
    	
    	  /* linearization for column module */
      .linearize-level-1,
      .linearize-level-1 > [class*="ym-col"]
       {
        display: block;
        float: none;
        padding: 0;
        margin: 0;
        width: 100% !important;
      }
    
      /* reset defined gutter values */
      .linearize-level-1 > [class*="ym-col"] > [class*="ym-cbox"] {
        overflow: hidden; /* optional for containing floats */
        padding: 0;
        margin: 0;
      }
    	
    	
    	.linearize-level-1 .col_1 .subcl{
    		padding-right:0!important;
    	}
    	.linearize-level-1 .col_2 .subcr{
    		padding-left:0!important;
    	}
    	.linearize-level-1 .col_2 {
    		margin-top:50px;
    	}
    und dann wie in der beschreibung geschrieben: die klasse ".linearize-level-1" zu den spalten modulen hinzufügen wo dus brauchst

    sollt somit passen
    lg

  6. #6
    Contao-Nutzer
    Registriert seit
    06.09.2012.
    Beiträge
    92

    Standard

    Ich habe den css Code einfach in mein Stylesheet eingefügt.

    Jetzt hab ich im Artikel, beim Startelement vom Spaltenset die Klasse .linearize-level-1 eingefügt, jedoch ändert sich bei der mobilen Darstellung nicht. Die Spalten stehen immer noch nebeneinander. Hab ich da was falsch verstanden oder etwas vergessen? Muss noch etwas beim Layout aktiviert sein?

  7. #7
    Contao-Fan
    Registriert seit
    12.11.2009.
    Ort
    Portugal
    Beiträge
    619

    Standard

    hallo nochmal!

    hast du es in ein media query "eingehüllt"?

    zb:
    @media screen and (max-width: 820px) {
    .....
    }

    dann sollte es "umspringen" wenn der browser kleiner ist als 820px (zb wenn du den browser zusammenschiebst)

    verwenden tu ichs zb auf dieser seite: http://www.shape-obstacles.com/de/produkte
    die <section> sollte die klasse "linearize-level-1" haben

    Sonst zeig mal einen Live-LInk damit ichs mir anschauen kann.
    Lg
    Karo

  8. #8
    Contao-Nutzer
    Registriert seit
    06.09.2012.
    Beiträge
    92

    Standard

    Hallo karo,

    auf der Seite www.hierbeck-consulting.de versuch ich mich grad an der mobilen Darstellung. Das mit den Spalten funktioniert noch nicht. An dem scheitert es noch. Wenn ich das hinkriegen würde, wäre die sonstige Umsetzung recht einfach. Glaub ich.

  9. #9
    Contao-Urgestein
    Registriert seit
    07.07.2009.
    Beiträge
    4.107

    Standard

    Die Subcolumns sind fluid, sie wachsen also mit und werden kleiner. Ab einer gewissen Breite machen Sie aber keinen Sinn mehr, weswegen ich sie immer resette:

    https://github.com/andreasisaak/cont...s/media.css#L7

  10. #10
    Contao-Fan
    Registriert seit
    12.11.2009.
    Ort
    Portugal
    Beiträge
    619

    Standard

    Zitat Zitat von herbert Beitrag anzeigen
    Hallo karo,

    auf der Seite www.hierbeck-consulting.de versuch ich mich grad an der mobilen Darstellung. Das mit den Spalten funktioniert noch nicht. An dem scheitert es noch. Wenn ich das hinkriegen würde, wäre die sonstige Umsetzung recht einfach. Glaub ich.
    Hallo Herbert!

    Neben der Klasse musst du natürlich den COde auch im CSS einbauen, und der fehlt noch!

    Oder verwende den CSS Code vom Andreas, der ist a bissle aufgeräumter und da brauchst du keine extra klasse dazu zu geben!

    lg

  11. #11
    Contao-Fan
    Registriert seit
    12.11.2009.
    Ort
    Portugal
    Beiträge
    619

    Standard

    Ein kleines Feedback zur Seite
    wenn schon Kontakt als überschrift steht würd ich direkt den Kontakt einfügen und nicht "hier finden sie unser KOntaktformular" und dann muss man noch auf den LInk gehen. Kann sein dass das Leute nicht verstehen und sich ärgern und das wäre nicht gut...
    direkt kontaktdaten + einen Link zum Kontaktformular
    Drunter im Footer hast du ja den Kontakt drinnen, warum nicht auch gleich hier. Und die Emailadresse "klickbar" machen!

    Lg

  12. #12
    Contao-Nutzer
    Registriert seit
    06.09.2012.
    Beiträge
    92

    Standard

    Nochmal Danke für eure Unterstützung.

    Ich hab ja ein Layout für mobile Darstellung erstellt. Dafür nutze ich folgendes CSS welches auch eingebunden ist.

    Code:
    body {
        background:url("files/consulting/header_bg.png") left top repeat-x;
    }
    
    .mod_quicknav {
        width:140px;
        left:230px;
        position:relative;
        margin-right:7px;
        border:3px double #D8D8D8;
        border-radius:6px;
        list-style-type:none;
        behavior:url('assets/css3pie/1.0.0/PIE.htc');
        behavior:url('assets/css3pie/1.0.0/PIE.htc');
        behavior:url('assets/css3pie/1.0.0/PIE.htc');
        top:20px;
        behavior:url('assets/css3pie/1.0.0/PIE.htc');
        behavior:url('assets/css3pie/1.0.0/PIE.htc');
        behavior:url('assets/css3pie/1.0.0/PIE.htc');
        behavior:url('assets/css3pie/1.0.0/PIE.htc');
        behavior:url('assets/css3pie/1.0.0/PIE.htc');
        behavior:url('assets/css3pie/1.0.0/PIE.htc');
        background:-moz-linear-gradient(270deg,#F7F7F7,#D6D6D6);
        background:-webkit-linear-gradient(270deg,#F7F7F7,#D6D6D6);
        background:-o-linear-gradient(270deg,#F7F7F7,#D6D6D6);
        background:-ms-linear-gradient(270deg,#F7F7F7,#D6D6D6);
        background:linear-gradient(180deg,#F7F7F7,#D6D6D6);
        -pie-background:linear-gradient(270deg,#F7F7F7,#D6D6D6);
        behavior:url('assets/css3pie/1.0.0/PIE.htc');
    }
    
    #mobil_logo {
        width:182px;
        height:182px;
        left:18px;
        position:relative;
        background-image:url("files/consulting/kreis1.png");
        top: -17px;
    }
    
    @media only screen and (max-width: 1280px) {
    }
    
    @media only screen and (max-width: 768px) {
    }
    
    @media only screen and (max-width: 768px) and (orientation:portrait) and (min-width: 768px) and (orientation:portrait) {
    }
    
    @media only screen and (max-width: 720px) {
        width:100%;
        .subcolumns .first,   .subcolumns .mod_colsetPart,   .subcolumns .sc_second,   .subcolumns > div {     float:none;
        margin:0 !important;
    }
    
    .subcolumns .mod_colsetPart,
    .subcolumns .sc_second {
        margin-top:20px !important;
    }
    
    .subcolumns .subcl,
    .subcolumns .subcr,
    .subcolumns .subc {
        padding:0 !important;
    }
    
    } @media only screen and (max-width: 480px) {
    }
    wieso wird der code dann nicht genommen? Irgendwie steh ich auf dem Schlauch. Muss ich noch irgend etwas im Layout aktivieren?

    Nur zur Verständnis: Könnte man die @media Abfrage weglassen, da ich dieses CSS eh nur für die Mobile Darstellung verwende? (für verschiedene Geräte macht es dann schon Sinn, ist klar)

    Danke für den Hinweis zum Kontaktformular, werde es ändern, wenn ich das mit den Spalten habe.
    Geändert von herbert (22.04.2013 um 15:31 Uhr)

  13. #13
    Contao-Fan
    Registriert seit
    12.11.2009.
    Ort
    Portugal
    Beiträge
    619

    Standard

    Ich arbeite eigentlich immer mit einem Layout und setzte die Mobile Version nur mit CSS um.
    Somit hab ich mehr möglichkeiten und vor allem volle Kontrolle wann welches Layout verwendet wird.
    Bin mir nicht genau sicher wann die Mobile Version verwendet wird von der Layouteisntellung (ab welcher screensize)
    Ansich könntest du hier in dem CSS dann das @media only screen and (max-width: 720px) { etc. rausnehmen
    da das Layout sowieso nur genommen werdne sollte wenn es ein mobiles gerät ist und wenn du dann dort immer das ganze einspaltig haben möchtest dann raus damit ...
    probier das mal ob es dann aufscheint im Code.
    Verwedest du Firebug oder in Chrome "Element untersuchen" um dir die Dinge genauer anzusehen? Dann siehst du ob ein Code greift oder nicht. Genauso kannst du zb in den Resourcen schauen ob das CSS überhaupt vorkommt.
    Wenn du Code ins Forum kopierst verwende am besten das Icon "#" oben dafür und setzt den Code dazwischen, dann ist er besser leserlich...

  14. #14
    Contao-Nutzer
    Registriert seit
    06.09.2012.
    Beiträge
    92

    Standard

    Hi Caro, klar benutze ich Firebug. Wenn du alles über dein Css steuerst, wie blendest du dann eventuell Module aus, die du in der mobilen Darstellung nicht benötigst? Einfach mit der Holzhammermethode visible? Oder gibts da n anderen Trick bzw. Möglichkeiten mit Contao3?

    Also der Fehler war hier. Ist mir anscheinend der Code ein bischen durcheinander gerutscht. (nämlich width:100%)


    Code:
    @media only screen and (max-width: 720px) {
    width:100%;
    .subcolumns .first, .subcolumns .mod_colsetPart, .subcolumns .sc_second, .subcolumns > div { float:none;
    margin:0 !important;
    }
    Verwendet ihr andere Zoomstufen mit initial-scale=1.0? Oder sollte man das besser so lassen wie es ist?

    basti

  15. #15
    Contao-Fan
    Registriert seit
    12.11.2009.
    Ort
    Portugal
    Beiträge
    619

    Standard

    Ansich verwende ich display:none für module / Elemente /etc. die nicht in der mobilen Version angezeigt werden sollen.
    Anscheind gibts da aber diskussionen darüber, da soweit ich gelesen habe machen Browser dies doch einlesen bevor sies dann sozusagen ausblenden. - sollten aber die wenigsten tun.. schau dich dazu mal netz um, hab vor kurzem erst darüber was gelesen, bin mir nicht 100%ig sicher. aber die meisten verwende es so.

    super dass du den fehler gefunden hast!

    Verwende immer initial-scale=1.0 !
    lg

  16. #16
    Contao-Fan Avatar von kayyy
    Registriert seit
    01.07.2009.
    Beiträge
    457
    Partner-ID
    8987

    Standard

    Ich verwende die Subcolumns inkl. der Bootstrap Erweiterung, sowie dem normalen Bootstrap Markup.

    Funktioniert soweit wunderbar.

  17. #17
    Contao-Nutzer
    Registriert seit
    06.09.2012.
    Beiträge
    92

    Standard

    Hallo,

    nochmal eine Frage zur mobilen Darstellung. Weiß nicht, ob ich nicht besser ein neues Thema aufmachen sollte, aber hier wurde mir sehr gut geholfen.

    Wenn ich das Browserfenster verkleinere, schaltet bei einer gewissen Größe der Header und der Footer auf height:auto um also:

    Code:
    #header, #footer
    {
    height:auto;
    }
    und der feste Wert für den Header : height:222px wird überschrieben. Ich habe im CSS jedoch nichts mit height:auto im header oder footer stehen.

    Wie kann ich verhindern, dass das überschrieben wird bzw. warum wird das überhaupt überschrieben. Hier nochmal der Link: www.hierbeck-consulting.de

    basti

  18. #18
    Contao-Fan
    Registriert seit
    12.11.2009.
    Ort
    Portugal
    Beiträge
    619

    Standard

    hallo basti!
    hab das thema noch abonniert, also nochmal eine Antwort
    Was hast du denn für CSS-Layouts in Theme aktiviert?
    Wahrs. das Responsive CSS (bin mir grad nicht sicher wie das heißt) und da steht das wahrs. drinnen!
    Aber warum möchtest dus raushaben? DIe Höhe vom StandardLayout wird ja nicht passen bei der Mobilen Version?

    Lg
    Karo

  19. #19
    Contao-Nutzer
    Registriert seit
    06.09.2012.
    Beiträge
    92

    Standard

    Hab jetz grad im Forum eine Lösung gefunden.

    Code:
    #header { height:222px!important; }
    auch im Mobilen Layout habe ich nur den Layout Builder aktiviert. Responsive Grid ist aus.

    Ich möchte zumindest den Header mit einer festen Höhe gestalten können. Da der Hintergrund am Body hängt und der Container dann bei einer verkleinerten Darstellung direkt unterm Logo hängt, passt die Darstellung nicht mehr. So kann ich ja genau bestimmen : Container bitte erst nach 222px. (so hoch ist auch das Hintergrundbild vom Body)

    So in etwa hab ich mir das vorgestellt und der erste Test hat auch funktioniert. Das mit den CSS- Frameworks unter Contao 3 ist für mich etwas seltsam. Unter 2.XX hatte ich solche Darstellungsschwierigkeiten nicht. Hab gerade das Buch erhalten: Webseiten erstllen mit Contao3. Vielleicht werd ich da mal schlauer.

  20. #20
    Contao-Fan
    Registriert seit
    12.11.2009.
    Ort
    Portugal
    Beiträge
    619

    Standard

    Hey

    Also es kommt aus dem Contao-CSS wie ich sehe
    zu finden unter "/* Contao Open Source CMS, (C) 2005-2013 Leo Feyer, LGPL license */" wenn man ins CSS schaut auf deiner seite.
    (bis 767px breite)

    > du kannst es ja in deinem Layout überschreiben mit der fixen höhe! zb. body #height {height:222px;}
    (wird übrigens dein Logo abgeschnitten)

    lg
    Kaor

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

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