Elemente nebeneinander mobil (responsive)
Es liegt nicht an .j-hgrid, sondern an der Spaltenbreite. Versuch mal:
2
3
4
5
6
7
8
9
10
@media (max-width: 767px) {
.mycolumn .cc-m-hgrid-column {
min-width: 0 !important;
padding: 0 2% 0 0 !important;
width: 48% !important;
float: left !
}
LG, az
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= 
) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
1. Sorry, ich weise meinen Spaltenelementen immer eine eigene Klasse zu, daher der .mycolumn Selektor
2. Du musst mal etwas aufräumen, dann klappt es.
Ausserdem hast Du 3 Elemente, nicht 2: also 33% Breite für die Spalte, nicht 48%. Damit das glatt hinhaut, habe ich das padding dann noch auf 0 gesetzt.
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<style type="text/css">
/* Unterstrich Links entfernen
-----------------------------------------------*/
.j-module a:link,
.j-module a:visited,
.j-module a:hover,
.j-static-page a:link,
.j-static-page a:visited,
.j-static-page a:hover {
text-decoration: none;
}
/* Footer zentrieren */
.j-meta-links {
float: none;
margin: 0 auto;
}
.j-info-row, .j-meta-links {
text-align: center;
}
/* Seiten Fade-in
------------------------------------*/
#content_area {
animation:fadein 1s;
-moz-animation:fadein 1s;
-webkit-animation:fadein 1s;
}
@keyframes fadein{from{opacity:0;}to{opacity:1;}}
@-moz-keyframes fadein{from{opacity:0;}to{opacity:1;}}
@-webkit-keyframes fadein{from{opacity:0;}to{opacity:1;}}
@-o-keyframes fadein{from{opacity:0;}to{opacity:1;}}
/*Überschriften mobil kleiner h1
------------------------------------------*/
@media (max-width: 720px) {
.j-module h1 {
font-size: 25px !important;
}
}
/*Buttons größe anpassen mobil und desktop
--------------------------------------------------*/
.content-options .j-calltoaction-link-style-1:link,
.content-options .j-calltoaction-link-style-1:visited {
font-size: 16px;
min-width: 150px;
}
/*spalten nebeneinander mobil
----------------------------------------------*/
@media (max-width: 767px) {
.cc-m-hgrid-column {
min-width: 0 !important;
padding: 0 !important;
width: 33% !important;
float: left !important;
}
}
@media (min-width:1024px) {
.content-options .j-calltoaction-link-style-1:link,
.content-options .j-calltoaction-link-style-1:visited {
font-size: 20px;
min-width:240px;
}
}
/* Logo volle breite
------------------------------------*/
#cc-m-11991935260 {
width: 100vw;
left: calc(-50vw + 50%);
position: relative;
padding: 0px;
}
.cc-m-gallery-slider ul img {
height: auto !important;
}
</style>
LG, az
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
klar, Zeile 115:
2
3
4
5
6
7
8
9
.content-options .j-calltoaction-link-style-1:link, .content-options .j-calltoaction-link-style-1:visited {
font-size: 16px;
min-width: 120px;
padding: 5px;
}
Mindestbreite verkleinern und Padding verändern.
LG, az
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
Das kannst du so nicht sagen, @mediaQueries gelten immer nur in Verbindung mit den Angaben für die Browserbreite (min-width oder max-width)
Und dann kommt es darauf an, an welcher Stelle eine Anweisung steht. Das kannst du aber alles nachlesen.
LG, AZ
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
...wo? wie? was? welcher Code? ...soll ich jetzt den ganzen Beitrag durchsehen? oh no, bitte nicht!
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
...also der Code auf Eurer Seite sieht doch schon sehr gut aus. Tipp: Formatierung des Codes beachten (beautify) = leichtere Fehlererkennung
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<style type="text/css">
/*<![CDATA[*/
h1,
h2,
h3,
li,
ol,
td,
p,
span {
hyphens: auto !important;
}
#cc-matrix-3099850794 {
display: flex;
flex-direction:column;
}
iframe {
border:none;
height:100%;
min-height: 600px;
display: block;
}
@media (max-width:767px) {
#cc-matrix-3099850794 {
flex-direction:row;
}
#cc-m-11537708894,
#cc-m-11537703694 {
display:none;
}
}
@media screen and (max-width:999px) {
iframe {
min-height: 750px;
}
}
@media (min-width: 1170px) {
.cc-indexpage .jtpl-header {
height: auto !important;
}
}
/*]]>*/
</style>
...rechts und links hattet Ihr einfach noch die Abstandselemente vergessen - die habe ich mal ausgeblendet. Und ich hab Euch noch eine Silbentrennung eingesetzt. Das sollte Standard sein, wenn Blocksatz verwendet wird - den bitte noch ergänzen, wo vergessen.
LG, az
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
Ähnliche Themen
Jetzt anmelden!
Jetzt registrieren!
