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

17.08.2021 23:23

Gismo
#1

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

Beitrag melden

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

Gismo
#2

Gismo

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

Beitrag melden

18.08.2021 19:32

Gismo
#3

Gismo

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

Beitrag melden

18.08.2021 20:33

Gismo
#4

Gismo

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

Beitrag melden

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

az_
#5

az_

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 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

Antworten

Beitrag melden

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

az_
#6

az_

ü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

Antworten

Beitrag melden

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

az_
#7

az_

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

Antworten

Beitrag melden

09.09.2021 00:05

Gismo
#8

Gismo

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

Beitrag melden

10.09.2021 14:28

Gismo
#9

Gismo

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

Beitrag melden

#10

11.09.2021 16:03

az_
#10

az_

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

Antworten

Beitrag melden

#11

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

Gismo
#11

Gismo

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

Beitrag melden

#12

13.09.2021 21:17

az_
#12

az_

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

Antworten

Beitrag melden

#13

14.09.2021 12:14

Gismo
#13

Gismo

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>
 