Webseite in der Desktop Ansicht ändern jedoch nicht in der Responsiven Ansicht

Jimdo-Userforum � Jimdo User-Forum � Jimdo-Specials (Tools, Widgets, HTML und CSS) � Webseite in der Desktop Ansicht ändern jedoch nicht in der Responsiven Ansicht

Themen-Einstellungen

Thema drucken

Bereich wechseln

Allgemeines Regeln f�r die Benutzung des Forums HowToDo ( = so geht�s) Jimdo User-Forum Eure Jimdo-Webseiten - Vorstellungsrunde Bugs, Workarounds und Anregungen Jimdo-Elemente Allgemeines Jimdo-Shop Jimdo-Specials (Tools, Widgets, HTML und CSS) Suchmaschinenoptimierung (SEO) Sonstiges Tutorials "OffTopic"-Themen "�bernahme" von Beitr�gen aus dem offiziellen Jimdo-Forum... Nutzungsbedingungen und Haftungsausschluss Jimdo-Blog

#1 | Webseite in der Desktop Ansicht ändern jedoch nicht in der Responsiven Ansicht datum

17.08.2021 23:23

Hallo zusammen

Ich weiss nicht ob sowas hier überhaupt möglich ist. Ich benutze aktuell das Designe Barcelona und da ist mir das Logo einfach zu gross. Ich habe es soweit hingekriegt,dass das Logo und der Titel in einer Spalte stehen.
nur sieht das ganze dann natürlich auf dem Handy ( Smartphone ) sch... aus. Frage: wie bring ich es hin,dass nur die Desktop Anzeige verändert wird jedoch nicht die Responsive Ansicht. da passt es so wie es jetzt ist.
Seite ist diese hier. https://www.apollo-elektro.ch/
|addpics|s50-f-ad66.jpg|/addpics|

Antworten

#2 | RE: Webseite in der Desktop Ansicht ändern jedoch nicht in der Responsiven Ansicht datum

18.08.2021 19:10 (zuletzt bearbeitet: 18.08.2021 19:13)

Gismo

Informationen anzeigen

Beitr�ge:	62
Registriert seit:	19.12.2019
Wohnort:	Schweiz

Habe jetzt einmal eine Testseite angelegt,damit es mir die Hauptseite nicht abschiesst mit dem Script

https://testshopapolloelektro.jimdofree....view_sid=132218

in der Desktop Ansicht würde es so passen nur Responsive sieht das ganze dann verzogen aus
So wie man im Bild 1 sieht. ich hätte es aber gerne so wie in Bild 2. ist das irgendwie möglich ?

mein Script das ich bisher habe.

1
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
 
<style type="text/css">
/*<![CDATA[*/
@media (max-width:768px){
/*Logo responsive*/
.jtpl-logo a img {
max-width:900px; !important;
margin-left:-90px !important;
margin-right:-90px !important;}
/*]]>*/
</style>
 

<style type="text/css">
/*<![CDATA[*/
@media (min-width:768px){
/*Logo Bildschirm*/
.jtpl-logo img {
    width: 300px;!important;
    margin-left: -5px !important;
    position: absolute;!important;
    height: 120px;!important;}
    /*]]>*/ 
</style>
 

<style>
/* <![CDATA[ */
.cc-product-variant-selectbox {
   background-color: #F2F2F2 !important; 
    height:60px;
    font-size:18px;
}
/*]]>*/
</style>
 

<style>
/* <![CDATA[ */
.j-product .cc-shop-product-desc .cc-shop-product-price-current {
    color: #000000;
    font-size: 32px;
    line-height: 1em;
    font-weight:bold ;
}
/*]]>*/
</style>
 

<style type="text/css">
/*<![CDATA[*/
 
.j-hr hr {
border-style:solid;    
border-color: #000000 ! important;
border-bottom-width: 1px;
border-style: solid;
}
 
/*]]>*/
</style>
 

<style type="text/css">
/*<![CDATA[*/
@media (max-width:768px){
 
.jtpl-main {
    color: #212121;
    font-family: "Open Sans",sans-serif;
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 2.5;
 
 
/*]]>*/ 
</style>
 

<style type="text/css">
/*<![CDATA[*/
 

.jtpl-main {
    color: #212121;
    font-family: "Open Sans",sans-serif;
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 2.5;
 
 
/*]]>*/ 
</style>
 

<style type="text/css">
/*<![CDATA[*/
.j-cart-hover-popup {
    position: relative;
    color: #fbfbfb;
    background-color: #222;
    background-color: rgba(247, 2, 2,);
    -webkit-transition: all 100ms ease;
    transition: all 100ms ease;
}
/*]]>*/ 
</style>
 

<style type="text/css">
/*<![CDATA[*/
#cc-checkout-steps .cc-checkout-steps-current {
    opacity: 1;
    background-color: #222;
    background-color: rgb(251, 0, 0);
    border-color: #222;
    border-color: rgba(51,51,51,.85);
   /*]]>*/ 
</style>
 

<style type="text/css">
/*<![CDATA[*/
.jtpl-navigation__label {
    transition: left .3s;
    border-bottom: 0;
    cursor: pointer;
    position: absolute;
    padding: 17px;
    text-align: center;
    text-decoration: none;
    top: 0;
    background-color: rgb(247, 2, 2);
    float: right;
    z-index: 1000;
    right: 0;
    width: 26px;
    height: 14px;
    /*]]>*/ 
</style>
 

<style type="text/css">
/*<![CDATA[*/
 
.j-search {
border-style:solid;   
border-width:1px; 
color:#000000 !important;
border-color:#000000;  
background:rgb(214,211,211);
}
 
/*]]>*/
</style>
 

<style type="text/css">
/*<![CDATA[*/
.jtpl-cart .j-cart-icon {
    background-color: rgba(247,2,2);
    padding: .10em .9em;
}
/*]]>*/ 
</style>
 

<style type="text/css">
/*<![CDATA[*/
.j-cart--hover-popup, .j-cart-icon {
    position: relative;
    color: #fbfbfb;
    background-color: #7b7a7a;
    background-color: rgba(247, 2, 2,);
    -webkit-transition: all 100ms ease;
    transition: all 100ms ease;
}
 /*]]>*/ 
</style>
 

<style type="text/css">
/*<![CDATA[*/
 .j-search .j-search-content input[type="text"].j-search-input {
    padding-left: 40px !important;
    border-color: #eee;
    color: #000;
}
 
   /*]]>*/ 
</style>
 

<style type="text/css">
/*<![CDATA[*/
.content-options .j-comment textarea, .content-options .j-comment input[type="text"], .content-options .j-comment input[type="date"], .content-options .commententry textarea, .content-options .commententry input[type="text"], .content-options .commententry input[type="date"], .content-options .j-formnew .cc-m-form-view-sortable input[type="text"], .content-options .j-formnew .cc-m-form-view-sortable input[type="date"], .content-options .j-formnew .cc-m-form-view-sortable input[type="email"], .content-options .j-formnew .cc-m-form-view-sortable textarea, .content-options .j-formnew .cc-m-form-view-sortable select, .content-options .j-newsletterbox input[type="email"], .content-options #cc-checkout-gutter input[type="text"], .content-options #cc-checkout-gutter input[type="date"], .content-options #cc-checkout-gutter input[type="email"], .content-options #cc-checkout-gutter textarea, .content-options #cc-checkout-gutter select, .content-options .j-googlemaps .cc-map-route-start, .content-options .j-checkout__input-field {
    border-color: #000;
    color: #000;
   /*]]>*/ 
</style>
 

<style type="text/css">
/*<![CDATA[*/
.cc-catalog-container-new .cc-catalog-galleryview.cc-catalog-st-3 .cc-product-title, .cc-catalog-container-new .cc-catalog-sliderview.cc-catalog-st-3 .cc-product-title {
    margin-bottom: 45px;
    text-align: center;
    
}
/*]]>*/ 
</style>
 

<style type="text/css">
/*<![CDATA[*/
.j-website-title-content {
    font-weight: normal;
    font-style: normal;
    color: #000;
    font-family: "Roboto Slab",serif,"google";
    font-size: 42px;
    text-transform: none;
    text-align: end;
    /*]]>*/ 
</style>
 

<style type="text/css">
/*<![CDATA[*/
.jtpl-title {
    background: white;}
    /*]]>*/ 
</style>
 

<style type="text/css">
/*<![CDATA[*/
.cc-imagewrapper img {
    display: inline;
    left: 1px;
    max-width: 100%;
    top: 30px;}
            /*]]>*/ 
</style>
 

<style type="text/css">
/*<![CDATA[*/
.j-website-title-content {
    line-height: 100px;
        /*]]>*/ 
</style>
 

 
[style=display: none;]|addpics|s50-g-7582.jpg,s50-h-5bfd.jpg|/addpics|[/style]
 

Antworten

#3 | RE: Webseite in der Desktop Ansicht ändern jedoch nicht in der Responsiven Ansicht datum

18.08.2021 19:32

Gismo

Informationen anzeigen

Beitr�ge:	62
Registriert seit:	19.12.2019
Wohnort:	Schweiz

einen kleinen schritt bin ich weiter mit diesem Script

1
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
 

<style type="text/css">
/*<![CDATA[*/
@media (max-width:768px){
/*Logo responsive*/
.jtpl-logo a img {
max-width:900px; !important;
margin-left:-90px !important;
margin-right:-90px !important;}
/*]]>*/
</style>
 

<style type="text/css">
/*<![CDATA[*/
@media (min-width:768px){
/*Logo Bildschirm*/
.jtpl-logo img {
    width: 300px;!important;
    margin-left: -5px !important;
    position: absolute;!important;
    height: 120px;!important;}
    /*]]>*/ 
</style>
 

<style type="text/css">
/*<![CDATA[*/
 
.j-website-title-content {
    font-weight: normal;
    font-style: normal;
    color: #000;
    font-family: "Roboto Slab",serif,"google";
    font-size: 42px;
    text-transform: none;
    text-align: end;}
    /*]]>*/ 
</style>
 

<style type="text/css">
/*<![CDATA[*/
@media (min-width:768px){
/*Logo Bildschirm*/
.jtpl-title {
    background: white;}
    /*]]>*/ 
</style>
 

<style type="text/css">
/*<![CDATA[*/
.cc-imagewrapper img {
    display: inline;
    left: 1px;
    max-width: 100%;
    top: 30px;}
            /*]]>*/ 
</style>
 

<style type="text/css">
/*<![CDATA[*/
.j-website-title-content {
    line-height: 100px;
        /*]]>*/ 
</style>
 

aber mit der Text ausrichtung im Responsiven passt es noch nicht, wenn ich den Befehl von end wieder auf center setze passt es in der Desktop Ansicht nicht mehr.

hmm wo mache ich den Fehler ???

Antworten

#4 | RE: Webseite in der Desktop Ansicht ändern jedoch nicht in der Responsiven Ansicht datum

18.08.2021 20:33

Gismo

Informationen anzeigen

Beitr�ge:	62
Registriert seit:	19.12.2019
Wohnort:	Schweiz

So ich glaube ich hab hingekriegt.

Das Script sieht jetzt so aus.

1
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
 
<style type="text/css">
/*<![CDATA[*/
@media (max-width:768px){
/*Logo responsive*/
.jtpl-logo a img {
max-width:900px; !important;
margin-left:-90px !important;
margin-right:-90px !important;}
/*]]>*/
</style>
 

<style type="text/css">
/*<![CDATA[*/
@media (min-width:768px){
/*Logo Bildschirm*/
.jtpl-logo img {
    width: 300px;!important;
    margin-left: -5px !important;
    position: absolute;!important;
    height: 120px;!important;}
    /*]]>*/ 
</style>
 

<style type="text/css">
/*<![CDATA[*/
@media (min-width:768px){
/*Logo Bildschirm*/
.j-website-title-content {
    font-weight: normal;
    font-style: normal;
    color: #000;
    font-family: "Roboto Slab",serif,"google";
    font-size: 42px;
    text-transform: none;
    text-align: end;}
    /*]]>*/ 
</style>
 

<style type="text/css">
/*<![CDATA[*/
@media (max-width:768px){
/*Logo responsive*/
.j-website-title-content {
    font-weight: normal;
    font-style: normal;
    color: #000;
    font-family: "Roboto Slab",serif,"google";
    font-size: 45px;
    text-transform: none;
    text-align: center;}
    /*]]>*/ 
</style>
 

<style type="text/css">
/*<![CDATA[*/
@media (min-width:768px){
/*Logo Bildschirm*/
.jtpl-title {
    background: white;}
    /*]]>*/ 
</style>
 

<style type="text/css">
/*<![CDATA[*/
.cc-imagewrapper img {
    display: inline;
    left: 1px;
    max-width: 100%;
    top: 30px;}
            /*]]>*/ 
</style>
 

<style type="text/css">
/*<![CDATA[*/
@media (min-width:768px){
/*Logo Bildschirm*/
.j-website-title-content {
    line-height: 100px;}
        /*]]>*/ 
</style>
 

<style>
/* <![CDATA[ */
.cc-product-variant-selectbox {
   background-color: #F2F2F2 !important; 
    height:60px;
    font-size:18px;
}
/*]]>*/
</style>
 

<style>
/* <![CDATA[ */
.j-product .cc-shop-product-desc .cc-shop-product-price-current {
    color: #000000;
    font-size: 32px;
    line-height: 1em;
    font-weight:bold ;
}
/*]]>*/
</style>
 

<style type="text/css">
/*<![CDATA[*/
 
.j-hr hr {
border-style:solid;    
border-color: #000000 ! important;
border-bottom-width: 1px;
border-style: solid;
}
 
/*]]>*/
</style>
 

<style type="text/css">
/*<![CDATA[*/
@media (max-width:768px){
 
.jtpl-main {
    color: #212121;
    font-family: "Open Sans",sans-serif;
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 2.5;
 
 
/*]]>*/ 
</style>
 

<style type="text/css">
/*<![CDATA[*/
 

.jtpl-main {
    color: #212121;
    font-family: "Open Sans",sans-serif;
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 2.5;
 
 
/*]]>*/ 
</style>
 

<style type="text/css">
/*<![CDATA[*/
.j-cart-hover-popup {
    position: relative;
    color: #fbfbfb;
    background-color: #222;
    background-color: rgba(247, 2, 2,);
    -webkit-transition: all 100ms ease;
    transition: all 100ms ease;
}
/*]]>*/ 
</style>
 

<style type="text/css">
/*<![CDATA[*/
#cc-checkout-steps .cc-checkout-steps-current {
    opacity: 1;
    background-color: #222;
    background-color: rgb(251, 0, 0);
    border-color: #222;
    border-color: rgba(51,51,51,.85);
   /*]]>*/ 
</style>
 

<style type="text/css">
/*<![CDATA[*/
.jtpl-navigation__label {
    transition: left .3s;
    border-bottom: 0;
    cursor: pointer;
    position: absolute;
    padding: 17px;
    text-align: center;
    text-decoration: none;
    top: 0;
    background-color: rgb(247, 2, 2);
    float: right;
    z-index: 1000;
    right: 0;
    width: 26px;
    height: 14px;
    /*]]>*/ 
</style>
 

<style type="text/css">
/*<![CDATA[*/
 
.j-search {
border-style:solid;   
border-width:1px; 
color:#000000 !important;
border-color:#000000;  
background:rgb(214,211,211);
}
 
/*]]>*/
</style>
 

<style type="text/css">
/*<![CDATA[*/
.jtpl-cart .j-cart-icon {
    background-color: rgba(247,2,2);
    padding: .10em .9em;
}
/*]]>*/ 
</style>
 

<style type="text/css">
/*<![CDATA[*/
.j-cart--hover-popup, .j-cart-icon {
    position: relative;
    color: #fbfbfb;
    background-color: #7b7a7a;
    background-color: rgba(247, 2, 2,);
    -webkit-transition: all 100ms ease;
    transition: all 100ms ease;
}
 /*]]>*/ 
</style>
 

<style type="text/css">
/*<![CDATA[*/
 .j-search .j-search-content input[type="text"].j-search-input {
    padding-left: 40px !important;
    border-color: #eee;
    color: #000;
}
 
   /*]]>*/ 
</style>
 

<style type="text/css">
/*<![CDATA[*/
.content-options .j-comment textarea, .content-options .j-comment input[type="text"], .content-options .j-comment input[type="date"], .content-options .commententry textarea, .content-options .commententry input[type="text"], .content-options .commententry input[type="date"], .content-options .j-formnew .cc-m-form-view-sortable input[type="text"], .content-options .j-formnew .cc-m-form-view-sortable input[type="date"], .content-options .j-formnew .cc-m-form-view-sortable input[type="email"], .content-options .j-formnew .cc-m-form-view-sortable textarea, .content-options .j-formnew .cc-m-form-view-sortable select, .content-options .j-newsletterbox input[type="email"], .content-options #cc-checkout-gutter input[type="text"], .content-options #cc-checkout-gutter input[type="date"], .content-options #cc-checkout-gutter input[type="email"], .content-options #cc-checkout-gutter textarea, .content-options #cc-checkout-gutter select, .content-options .j-googlemaps .cc-map-route-start, .content-options .j-checkout__input-field {
    border-color: #000;
    color: #000;
   /*]]>*/ 
</style>
 

<style type="text/css">
/*<![CDATA[*/
.cc-catalog-container-new .cc-catalog-galleryview.cc-catalog-st-3 .cc-product-title, .cc-catalog-container-new .cc-catalog-sliderview.cc-catalog-st-3 .cc-product-title {
    margin-bottom: 45px;
    text-align: center;
    
}
/*]]>*/ 
</style>
 

evtl. hatt es noch fehler drinn ,fals ja wo ?

Vieleicht hilft es ja sonst noch jemandem,der sein Logo auch kleiner möchte im Designe Barcelona.

Ach ja ich denke,das es normal ist,dass ich das Logo im bearbeitungsmodus nicht sehen kann,da ich es ja über den Titel geschoben habe oder ?

Antworten

#5 | RE: Webseite in der Desktop Ansicht ändern jedoch nicht in der Responsiven Ansicht datum

20.08.2021 10:14 (zuletzt bearbeitet: 20.08.2021 10:33)

az_

Informationen anzeigen

Beitr�ge:	2403
Registriert seit:	28.04.2015
Wohnort:	Berlin

Ja, da sind noch Fehler drin.
- Du musst unbedingt jede geöffnete Klammer "{" wieder schließen mit "}"
- ; !important; ist unwirksam - das erste ; muss weg.

- außerdem kannst Du das Skript zusammenfassen:

<style type="text/css">
/*<![CDATA[*/

muss nur 1 x gesetzt werden (...ganz zu Beginn) und

/*]]>*/
</style>

auch (...ganz am Ende)

- und dann schau mal, ob Du die @media-Queries nicht auch bündeln kannst.

1
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
 

<style type="text/css">
    /*<![CDATA[*/
 
    @media (max-width:768px) {
 
        /*Logo responsive*/
        .jtpl-logo a img {
            max-width: 900px;
             !important;
            margin-left: -90px !important;
            margin-right: -90px !important;
        }
 
    }
 

    @media (min-width:768px) {
 
        /*Logo Bildschirm*/
        .jtpl-logo img {
            width: 300px !important;
            margin-left: -5px !important;
            position: absolute !important;
            height: 120px !important;
        }
    }
 

    @media (min-width:768px) {
 
        /*Logo Bildschirm*/
        .j-website-title-content {
            font-weight: normal;
            font-style: normal;
            color: #000;
            font-family: "Roboto Slab", serif, "google";
            font-size: 42px;
            text-transform: none;
            text-align: end;
        }
    }
 
    @media (max-width:768px) {
 
        /*Logo responsive*/
        .j-website-title-content {
            font-weight: normal;
            font-style: normal;
            color: #000;
            font-family: "Roboto Slab", serif, "google";
            font-size: 45px;
            text-transform: none;
            text-align: center;
        }
 

    }
 

 
    @media (min-width:768px) {
 
        /*Logo Bildschirm*/
        .jtpl-title {
            background: white;
        }
 
    }
 

    .cc-imagewrapper img {
        display: inline;
        left: 1px;
        max-width: 100%;
        top: 30px;
    }
 

 
    @media (min-width:768px) {
 
        /*Logo Bildschirm*/
        .j-website-title-content {
            line-height: 100px;
        }
    }
 

    .cc-product-variant-selectbox {
        background-color: #F2F2F2 !important;
        height: 60px;
        font-size: 18px;
    }
 

    .j-product .cc-shop-product-desc .cc-shop-product-price-current {
        color: #000000;
        font-size: 32px;
        line-height: 1em;
        font-weight: bold;
    }
 

    .j-hr hr {
        border-style: solid;
        border-color: #000000 ! important;
        border-bottom-width: 1px;
        border-style: solid;
    }
 

 
    @media (max-width:768px) {
 
        .jtpl-main {
            color: #212121;
            font-family: "Open Sans", sans-serif;
            font-size: 16px;
            font-size: 1.6rem;
            line-height: 2.5;
        }
    }
 

    .jtpl-main {
        color: #212121;
        font-family: "Open Sans", sans-serif;
        font-size: 16px;
        font-size: 1.6rem;
        line-height: 2.5;
 
    }
 

 
    .j-cart-hover-popup {
        position: relative;
        color: #fbfbfb;
        background-color: #222;
        background-color: rgba(247, 2, 2, );
        -webkit-transition: all 100ms ease;
        transition: all 100ms ease;
    }
 

 
    #cc-checkout-steps .cc-checkout-steps-current {
        opacity: 1;
        background-color: #222;
        background-color: rgb(251, 0, 0);
        border-color: #222;
        border-color: rgba(51, 51, 51, .85);
 

    }
 

    .jtpl-navigation__label {
        transition: left .3s;
        border-bottom: 0;
        cursor: pointer;
        position: absolute;
        padding: 17px;
        text-align: center;
        text-decoration: none;
        top: 0;
        background-color: rgb(247, 2, 2);
        float: right;
        z-index: 1000;
        right: 0;
        width: 26px;
        height: 14px;
 
    }
 

    .j-search {
        border-style: solid;
        border-width: 1px;
        color: #000000 !important;
        border-color: #000000;
        background: rgb(214, 211, 211);
    }
 

 

    .jtpl-cart .j-cart-icon {
        background-color: rgba(247, 2, 2);
        padding: .10em .9em;
    }
 

    .j-cart--hover-popup,
    .j-cart-icon {
        position: relative;
        color: #fbfbfb;
        background-color: #7b7a7a;
        background-color: rgba(247, 2, 2, );
        -webkit-transition: all 100ms ease;
        transition: all 100ms ease;
    }
 

    .j-search .j-search-content input[type="text"].j-search-input {
        padding-left: 40px !important;
        border-color: #eee;
        color: #000;
    }
 
    .content-options .j-comment textarea,
    .content-options .j-comment input[type="text"],
    .content-options .j-comment input[type="date"],
    .content-options .commententry textarea,
    .content-options .commententry input[type="text"],
    .content-options .commententry input[type="date"],
    .content-options .j-formnew .cc-m-form-view-sortable input[type="text"],
    .content-options .j-formnew .cc-m-form-view-sortable input[type="date"],
    .content-options .j-formnew .cc-m-form-view-sortable input[type="email"],
    .content-options .j-formnew .cc-m-form-view-sortable textarea,
    .content-options .j-formnew .cc-m-form-view-sortable select,
    .content-options .j-newsletterbox input[type="email"],
    .content-options #cc-checkout-gutter input[type="text"],
    .content-options #cc-checkout-gutter input[type="date"],
    .content-options #cc-checkout-gutter input[type="email"],
    .content-options #cc-checkout-gutter textarea,
    .content-options #cc-checkout-gutter select,
    .content-options .j-googlemaps .cc-map-route-start,
    .content-options .j-checkout__input-field {
        border-color: #000;
        color: #000;
    }
 

 
    .cc-catalog-container-new .cc-catalog-galleryview.cc-catalog-st-3 .cc-product-title,
    .cc-catalog-container-new .cc-catalog-sliderview.cc-catalog-st-3 .cc-product-title {
        margin-bottom: 45px;
        text-align: center;
 
    }
 

    /*]]>*/
 
</style>
 

 

Achtung: Code im Forum bitte immer mit der Schaltfläche für "Code" einkapseln!!! (=

)

Bitte sendet mir keine privaten Nachrichten über dieses Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

...hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

...NEU!!! - hier könnt Ihr unser Userforum finanziell unterstützen: https://redesign-berlin.xobor.de/donations.html

Antworten

#6 | RE: Webseite in der Desktop Ansicht ändern jedoch nicht in der Responsiven Ansicht datum

20.08.2021 10:29 (zuletzt bearbeitet: 20.08.2021 10:30)

az_

Informationen anzeigen

Beitr�ge:	2403
Registriert seit:	28.04.2015
Wohnort:	Berlin

übrigens: sowas ist doppelt gemoppelt:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 

    @media (max-width:768px) {
 
        .jtpl-main {
            color: #212121;
            font-family: "Open Sans", sans-serif;
            font-size: 16px;
            font-size: 1.6rem;
            line-height: 2.5;
        }
    }
 

    .jtpl-main {
        color: #212121;
        font-family: "Open Sans", sans-serif;
        font-size: 16px;
        font-size: 1.6rem;
        line-height: 2.5;
 
    }
 

 

...der allgemeine Eintrag würde ausreichen.

LG, az

Achtung: Code im Forum bitte immer mit der Schaltfläche für "Code" einkapseln!!! (=

Antworten

#7 | RE: Webseite in der Desktop Ansicht ändern jedoch nicht in der Responsiven Ansicht datum

20.08.2021 10:45 (zuletzt bearbeitet: 20.08.2021 10:46)

...und Du hast die Bildschirmbreiten bis 1169px vergessen:

Achtung: Code im Forum bitte immer mit der Schaltfläche für "Code" einkapseln!!! (=

Antworten

#8 | RE: Webseite in der Desktop Ansicht ändern jedoch nicht in der Responsiven Ansicht datum

09.09.2021 00:05

Gismo

Informationen anzeigen

Beitr�ge:	62
Registriert seit:	19.12.2019
Wohnort:	Schweiz

Hallo az_ danke ,dass Du hier mal einen Blick drüber geworfen hast.

Das ganze hatt mir ein Kumpel irgendwie zusammengebastelt,da ich selbst nicht so viel ahnung von CSS und HTML habe.

Das mit dem Logo hüpfer habe ich bemerkt aber ich kriegs einfach nicht hin
wie das richtig lauten muss,so dass sich der Text dann nicht ins Logo hineinschiebt.

Von meinem Kumpel habe ich auch nichts mehr gehört. denke er kanns auch nicht. !
allso bin ich auf mich selbst gestellt. Hatte neulich die ganze Seite abgeschossen,gut das ich vom Script ( das leider noch fehler drinn hat ) ein Backup erstellt hatte.

Du schreibst ich hätte die Bildschirmbreiten bis 1169px vergessen ?
habe sowas jetzt erstellt aber ich denke es ist falsch.

1
2
3
4
5
6
7
 
@media (max-width:1169px){
/*Logo Bildschirm*/
.jtpl-logo img {
    width: 300px;
    margin-left: -5px ;
    position: absolute;
    height: 120px;}
 

Antworten

#9 | RE: Webseite in der Desktop Ansicht ändern jedoch nicht in der Responsiven Ansicht datum

10.09.2021 14:28

Gismo

Informationen anzeigen

Beitr�ge:	62
Registriert seit:	19.12.2019
Wohnort:	Schweiz

Habe das mit den 1169px versucht selbst hinzukriegen aber es haut nicht hin,jetzt ist das logo auf der Testseite riesig geworden.

1
2
3
4
 
@media (min-width:1169px){
/*Logo Bildschirm*/
.jtpl-logo img {
    width: 1169px;}
 

Antworten

#10 | RE: Webseite in der Desktop Ansicht ändern jedoch nicht in der Responsiven Ansicht datum

11.09.2021 16:03

Du musst nicht vergessen, die Klammer, die du geöffnet hast, auch wieder zuschließen. Das gilt für HTML genauso wie für CSS Anweisungen. Und vor allem für geschachtelte CSS Anweisungen wie bei Media Queries

Prinzipiell ist das schon richtig, was du geschrieben hast, aber eine Breite von über 1100 Pixel ist natürlich fett. Versuch mal erst mal 250px und taste dich dann ran. Manchmal muss man auch bei der Höhe eingreifen. Das musst du aber mal selbst ausprobieren.

LG, AZ

Achtung: Code im Forum bitte immer mit der Schaltfläche für "Code" einkapseln!!! (=

Antworten

#11 | RE: Webseite in der Desktop Ansicht ändern jedoch nicht in der Responsiven Ansicht datum

12.09.2021 17:49 (zuletzt bearbeitet: 12.09.2021 18:00)

na Super jetzt bin ich wieder gleich weit wie am Anfang auf der Test Seite

https://testshopapolloelektro.jimdofree....view_sid=958281

habe die Scripte zusammengefasst wie es hiess

- außerdem kannst Du das Skript zusammenfassen:

<style type="text/css">
/*<![CDATA[*/

muss nur 1 x gesetzt werden (...ganz zu Beginn) und

/*]]>*/
</style>

auch (...ganz am Ende)

Das ganze wird mir noch etliche Wochenenden Kopfzerbrechen bereiten
gestern 6 Stunden drann heute 8 Stunden

Tja es heisst ja nicht umsonst Schuster bleib bei deinen Leisten !

Denke bald ich geh mit diesem Problem zu einem Supporter auch wenn ich dafür bezahlen muss, jedenfalls schont das meine Nerven

Antworten

#12 | RE: Webseite in der Desktop Ansicht ändern jedoch nicht in der Responsiven Ansicht datum

13.09.2021 21:17

Eigentlich hatte ich weiter oben das gesamte CSS bereits aufgeräumt und korrigiert. Das hättest du eigentlich einfach nur kopieren müssen.
Schreib mich per E-Mail an, wenn ich dir helfen soll.
LG, AZ

Achtung: Code im Forum bitte immer mit der Schaltfläche für "Code" einkapseln!!! (=

Antworten

#13 | RE: Webseite in der Desktop Ansicht ändern jedoch nicht in der Responsiven Ansicht datum

14.09.2021 12:14

Gismo

Informationen anzeigen

Beitr�ge:	62
Registriert seit:	19.12.2019
Wohnort:	Schweiz

So ich habe jetzt das Script so wie du geschrieben hast weiter oben kopiert und den befehl ! important ; habe ich gelöscht da es keine auswirkung hatt so wie du mir geschrieben hast.

Hier nun das ganze Script mal zusammengefasst

1
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
 
<style type="text/css">
/*<![CDATA[*/
@media (max-width:768px) {
/*Logo responsive*/
.jtpl-logo a img {
max-width: 900px;
margin-left: -90px;
margin-right: -90px;}
 
}
@media (min-width:768px) {
/*Logo Bildschirm*/
.jtpl-logo img {
width: 300px;
margin-left: -5px;
position: absolute;
height: 120px;}
 
}
@media (min-width:768px) {
/*Logo Bildschirm*/
.j-website-title-content {
font-weight: normal;
font-style: normal;
color: #000;
font-family: "Roboto Slab", serif, "google";
font-size: 42px;
text-transform: none;
text-align: end;}
 
}
@media (max-width:768px) {
/*Logo responsive*/
.j-website-title-content {
font-weight: normal;
font-style: normal;
color: #000;
font-family: "Roboto Slab", serif, "google";
font-size: 45px;
text-transform: none;
text-align: center;}
 
}
@media (min-width:768px) {
/*Logo Bildschirm*/
.jtpl-title {
background: white;}
 
}
.cc-imagewrapper img {
display: inline;
left: 1px;
max-width: 100%;
top: 30px;}
 
@media (min-width:768px) {
/*Logo Bildschirm*/
.j-website-title-content {
line-height: 100px;}
 
}
.cc-product-variant-selectbox {
background-color: #F2F2F2 !important;
height: 60px;
font-size: 18px;}
        
.j-product .cc-shop-product-desc .cc-shop-product-price-current {
color: #000000;
font-size: 32px;
line-height: 1em;
font-weight: bold;}
 
.j-hr hr {
border-style: solid;
border-color: #000000 ! important;
border-bottom-width: 1px;
border-style: solid;}
 
@media (max-width:768px) {
.jtpl-main {
color: #212121;
font-family: "Open Sans", sans-serif;
font-size: 16px;
font-size: 1.6rem;
line-height: 2.5;}
}
 
.jtpl-main {
color: #212121;
font-family: "Open Sans", sans-serif;
font-size: 16px;
font-size: 1.6rem;
line-height: 2.5;}
 
.j-cart-hover-popup {
position: relative;
color: #fbfbfb;
background-color: #222;
background-color: rgba(247, 2, 2, );
-webkit-transition: all 100ms ease;
transition: all 100ms ease;}
 
#cc-checkout-steps .cc-checkout-steps-current {
opacity: 1;
background-color: #222;
background-color: rgb(251, 0, 0);
border-color: #222;
border-color: rgba(51, 51, 51, .85);}
 
.jtpl-navigation__label {
transition: left .3s;
border-bottom: 0;
cursor: pointer;
position: absolute;
padding: 17px;
text-align: center;
text-decoration: none;
top: 0;
background-color: rgb(247, 2, 2);
float: right;
z-index: 1000;
right: 0;
width: 26px;
height: 14px;}
 
.j-search {
border-style: solid;
border-width: 1px;
color: #000000 !important;
border-color: #000000;
background: rgb(214, 211, 211);}
 
.jtpl-cart .j-cart-icon {
background-color: rgba(247, 2, 2);
padding: .10em .9em;}
 
.j-cart--hover-popup,
.j-cart-icon {
position: relative;
color: #fbfbfb;
background-color: #7b7a7a;
background-color: rgba(247, 2, 2, );
-webkit-transition: all 100ms ease;
transition: all 100ms ease;}
 
.j-search .j-search-content input[type="text"].j-search-input {
padding-left: 40px !important;
border-color: #eee;
color: #000;}
 
.content-options .j-comment textarea,
.content-options .j-comment input[type="text"],
.content-options .j-comment input[type="date"],
.content-options .commententry textarea,
.content-options .commententry input[type="text"],
.content-options .commententry input[type="date"],
.content-options .j-formnew .cc-m-form-view-sortable input[type="text"],
.content-options .j-formnew .cc-m-form-view-sortable input[type="date"],
.content-options .j-formnew .cc-m-form-view-sortable input[type="email"],
.content-options .j-formnew .cc-m-form-view-sortable textarea,
.content-options .j-formnew .cc-m-form-view-sortable select,
.content-options .j-newsletterbox input[type="email"],
.content-options #cc-checkout-gutter input[type="text"],
.content-options #cc-checkout-gutter input[type="date"],
.content-options #cc-checkout-gutter input[type="email"],
.content-options #cc-checkout-gutter textarea,
.content-options #cc-checkout-gutter select,
.content-options .j-googlemaps .cc-map-route-start,
.content-options .j-checkout__input-field {
border-color: #000;
color: #000;}
 
.cc-catalog-container-new .cc-catalog-galleryview.cc-catalog-st-3 .cc-product-title,
.cc-catalog-container-new .cc-catalog-sliderview.cc-catalog-st-3 .cc-product-title {
margin-bottom: 45px;
text-align: center;}
 
/*]]>*/
</style>
 

Antworten

#14 | RE: Webseite in der Desktop Ansicht ändern jedoch nicht in der Responsiven Ansicht datum

14.09.2021 12:16

Vielen Dank

Wenn wir jetzt noch den Logo "hüpfer" wegkriegen bin ich restlos glücklich

Vielen Dank AZ_ für Deine Hilfe

Antworten

Malaga | Headleiste soll oben bleiben � � *gelöst - Musik/Sound Player

�hnliche Themen

Antworten

Letzter Beitrag

Galerie-Bilder in mobiler Version nicht untereinander sondern gekachelt wie auf Desktop-Version
Erstellt im Forum Jimdo-Elemente von fancyray64 1 14.06.2022 20:20
az_ • Zugriffe: 560
Desktop Navigation auch auf mobilen Geräten ("Hamburger-Menu" ausschalten)
Erstellt im Forum Jimdo-Specials (Tools, Widgets, HTML und CSS) von fancyray64 1 14.06.2022 20:06
az_ • Zugriffe: 468
Mobiles Menü auch auf Desktop anzeigen, Amsterdam
Erstellt im Forum Jimdo-Specials (Tools, Widgets, HTML und CSS) von Kim Koch 5 16.02.2021 17:12
Kim Koch • Zugriffe: 694

Design Miami - seitenfüllendes Hintergrundbild und gleichzeitig Logo in mobiler und Desktop-Ansicht nach oben links
Erstellt im Forum Jimdo-Specials (Tools, Widgets, HTML und CSS) von LauraC.

08.04.2020 11:20
von

LauraC. • Zugriffe: 1371

Bilder in der responsiven Darstellung auf Smartphone plötzlich riesengross. !
Erstellt im Forum Jimdo-Specials (Tools, Widgets, HTML und CSS) von Gismo 2 18.01.2020 12:23
az_ • Zugriffe: 628
Wer die Wahl hat ... SLIDER oder Galerie (vor allem mobile Ansicht) - was meint Ihr?
Erstellt im Forum Allgemeines von DocBernie 0 30.08.2018 16:54
DocBernie • Zugriffe: 1522
Design Zürich - Logo fixieren für die mobile Ansicht
Erstellt im Forum Allgemeines von Sandra 2 20.04.2018 16:15
Sandra • Zugriffe: 1360
Eigenes Template wird auf dem Smartphone nicht responsive angezeigt
Erstellt im Forum Allgemeines von solanum 5 17.12.2017 14:31
solanum • Zugriffe: 1587
Logo für mobile Ansicht hochladen
Erstellt im Forum Allgemeines von AnnaEQ 4 25.01.2019 12:16
az_ • Zugriffe: 1578

Xobor-Forum f�r Jimdo-Creator User

Bitte geben Sie einen Grund f�r die Verwarnung an