Druckbare Version
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
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
danke für die info, schau mir das dort an
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?
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
und dann wie in der beschreibung geschrieben: die klasse ".linearize-level-1" zu den spalten modulen hinzufügen wo dus brauchstCode:
/***** 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;
}
sollt somit passen
lg
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?
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
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.
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
Hallo Herbert!Zitat:
Zitat von 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
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
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.
wieso wird der code dann nicht genommen? Irgendwie steh ich auf dem Schlauch. Muss ich noch irgend etwas im Layout aktivieren?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) {
}
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.
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...
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%)
Verwendet ihr andere Zoomstufen mit initial-scale=1.0? Oder sollte man das besser so lassen wie es ist?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;
}
basti
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
Ich verwende die Subcolumns inkl. der Bootstrap Erweiterung, sowie dem normalen Bootstrap Markup.
Funktioniert soweit wunderbar.
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:
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.Code:#header, #footer
{
height:auto;
}
Wie kann ich verhindern, dass das überschrieben wird bzw. warum wird das überhaupt überschrieben. Hier nochmal der Link: www.hierbeck-consulting.de
basti
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
Hab jetz grad im Forum eine Lösung gefunden.
auch im Mobilen Layout habe ich nur den Layout Builder aktiviert. Responsive Grid ist aus.Code:#header { height:222px!important; }
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.
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