Frage zu media-queries.css?


Shorty1968

Erfahrenes Mitglied
#1
Hallo,
ich möchte gerade mein Shop an mansche stellen mit media-queries.css noch Reponsiv machen,bin dabei aber leider auf ein Problem gestossen.

Ich habe mir ein media-queries.css erstellt und sie eingebunden,bei diesem Code hat alles Funktioniert.
CSS:
.best_offer { width:100%; text-align: center; padding-top: 5px; padding-bottom: 55px; }
Aber bei diesem Code bewegt sich nichts.
CSS:
.roduct_inquiry { width:100%; text-align: center; margin-top: 50px; margin-bottom: 25px; margin-left: -1000px;}
ich habe keine ahnung warum sich das nicht nach Links verschieben lässt?
 

Anhänge

basti1012

Erfahrenes Mitglied
#2
bei den Shop ist sowieso alles komisch.
Du willst den Button nur bei der Handy ansicht weiter mittig haben ? Und bei der großen Ansicht darf er so bleiben ?
Wenn ich den @mediqueries größe von deinen Shop nehme
Code:
@media screen and (max-width: 600px){
.product_inquiry {
/*marin-left:160px;*/
margin: 0 auto;
}
}
margin-left weg machen und margin:0 auto hin mache, dann habe ich den Button mittig darunter. Ab 600 pixel bleibt er dann so wie er halt ist, aber bei festen größen wie margin-left:160px ist das auch etwas schwer es responsiv zu bekommen weil der Abstand dann ja immer gleich bleibt egal wie groß der Bildschirm ist.

Soll der Button bei großer Ansicht auch noch verschoben werden ?
 

Shorty1968

Erfahrenes Mitglied
#3
Im grossen bildschirm kann es so bleiben,aber im Kleinen soll er nach links wenn ich in der @mediqueries das
/*marin-left:160px;*/
margin: 0 auto;
eintrage tut sich nichts?
 

basti1012

Erfahrenes Mitglied
#4
ich kann den Eintrag nicht finden.Ich sehe da immer noch die andere css. Auserdem ist da ein Eintrag falsch geschrieben.
Code:
#padding-left: 15px;
Das # Zeichen darf da nicht stehen.
In welchen Shop machst du dasden gerade ? Im Test Shop oder den anderen ? Weil ich kucke die ganze Zeit in den anderen und da funktioniert das mit der Css änderng.

Kopiere doch mal meinen Eintrag ganz unten in deiner Css ob es überhaupt funktioniert
 

basti1012

Erfahrenes Mitglied
#6
hast du für media queries eine eigene css Datei angelegt ? Die ist überhaupt nicht eingebunden bw ich kann die niergenswo im quelltext finden ?

auserdem steht in deiner media queries.css das
Code:
 .roduct_inquiry { width:100%; text-align: center; padding-top: 5px; padding-bottom: 55px; margin: 0 auto; }
solte das nicht
.product_inquiry heißen ?

Habe über die console deine queries.css eingebunden ,mit meinen anpassungen hier und dann ging das zumindest schon mal
 
Zuletzt bearbeitet:

Shorty1968

Erfahrenes Mitglied
#7
Ja ich habe sie in der /templates/Schnaepchenpiet/css/general.css.php mit Folgendem Code eingebunden.
CSS:
$css_array[] = DIR_TMPL_CSS.'media-queries.css';
Und die anderen Codes die ich in der media queries eingetragen habe reagieren eigentlich auch auf änderungen,nur dieser code um den es hier geht nicht.

Aber wenn ich mir meinen Shop auf meinem Handy Galaxy Prime ansehe sitzt der Preisvorschlag Button zu weitLinks,im Firefox Bildschirm Grösse Testen sitzt er wie er soll.
 

basti1012

Erfahrenes Mitglied
#8
bei mir würde das so aussehen
PHP:
 $css_array = array(
    DIR_TMPL.'stylesheet.css',
    DIR_TMPL.'media-queries.css',
  );
Aber das kann bei einen tamplat ja wieder anders sein.

Aber trotzdem kommisch das ich die mediaqeries-css nicht finden kann. Du sagst ja das es auf handy geht, ?Vieleicht hat der Sfop sowas wie eine Handy Weiche oder so was in der art. Ich muss mal kucken ob ich die css im Handy finden kann.

Ich habe Beitrag 6# nochmal geändert Ist das richtig geschrieben was ich da geschrieben habe mit
.roduct_inquiry
 

Shorty1968

Erfahrenes Mitglied
#9
Ups da muss sich das p ausversehen gelöscht haben danke,ja wie in deinem Template müsste es bei meinem Alten Template sein aber in dem Bootstrap ist es angeblich anderst.

Im Firefox Bildschirm Test sieht alles gut aus auf dem Handy nicht,wie schon gesagt bei dem Preisvorschlag geht das verschieben in der media-queri.css nur bei diesem Code geht nichts.
 

basti1012

Erfahrenes Mitglied
#10
hast du mal den Eintrag aus den stylesheet.min.css auskommentiert und dann mal getestet. Könnte ja sein das die Css deine meidia queies aus irgendein Grund überschreiben tut. Leider kann ich das nicht vernünftig testen weil die meida queries css gar nicht angzeigt wird bei mir. Ich teste mal anderen Browser. Auf Handy kann ich die css auch nicht finden. Ich verstehe das irgendwie nicht was hier wieder los ist bei mir
 

basti1012

Erfahrenes Mitglied
#12
mitlerweile sehe ich die queries css auch. Die einträge die im @mediaqueries stehen sind alle durchgestrichen. Die Css aus der normalen stylesheets greifen da wohl. Ich brauche da nur den eintrag mit margin-left:160px raus nehmen und schon greift er auf die meida queries css zu.

Nimm doch mal den margin-left da raus
Code:
.product_inquiry{
/*margin-left:160px;'/
}
und mache den Eintrag mal in der stylesheet ganz unten rein
Code:
@media screen and (min-width: 601px){
   .product_inquiry{
       margin-left:160px;
   }
}
Einfach mal testen und wenn das geht dann weiß man zumindest was geändert werden muß
Ich muss erstmal zwei stunden weg
 

Shorty1968

Erfahrenes Mitglied
#13
kein Problem ich habe die änderung mal gemacht aber es bleibt alles wie ees ist ich werde noch irre,was hälst du davon wen ich dir das Template per PN mal schicke und du schaust es dir mal genauer an?
 

basti1012

Erfahrenes Mitglied
#14
ach nochwas. Ich weiss ja nicht wie bei css mit @mediaqueries ist. Normalerweise wird der code von oben nach unten gelesen. Dann haben ids vorang gegenüber classen und so weiter.

Bei dir wird erst der @meidia queries mit den unter 600 Pixel geladen und danach der Eintrag wo das margin wieder margin-left:160px hat. Fals das nach reinfolge gehen würde kann es ja nicht gehen.

Nur leider weiß ich nicht wie das mit der priorität ist mit den @queries:du nimmst die änderungen wieder zu schnell raus da kann ich gar nicht kucken.

Aber gut muss jetzt erstmal 2 Stunden weg vieleicht hat in der Zeit wer anders noch ein Rat
 

Shorty1968

Erfahrenes Mitglied
#16
So habe deine änderungen wider drinne,muss vorher etwas falsch gemacht haben nun bewegt er sich.

*EDIT*
Ich verstehe es nicht wen ich den Code unten in die stylesheet.css eintrage Funktioniert es und sogar einiges aus der media-queri.css wird übernommen?
CSS:
@media screen and (min-width: 601px){
   .product_inquiry{
       margin-left:160px;
   }
}
 
Zuletzt bearbeitet:

basti1012

Erfahrenes Mitglied
#17
Das ist doch schon mal ein Anfang.
Du hast bei deinen Min und Max Werte beides 601 geschrieben. Das geht nicht ,bzw bei der größe könnte es dann zu problemen kommen.

Aber bei der @mediaquereies tut man ja in den block nur die Werte die gewechselt werden sollen. Zb Farben die immer gleich bleiben bei jeder größe kommen in den block dann nicht rein .
Ich weiß jetzt nicht was du noch geändert haben willst,aber wenn ich die Werte aus deinen ersten post nehme solltees ungefähr so aussehen


CSS:
/*das in deiner stylesheet.min.css*/
.product_inquiry {
   color: #FFdEAD;
   background:#434343;
   border:1px solid  #FFdEAD;
   border-radius: 10px;
   margin-top: -20px;
   margin-bottom: 15px;
   width: 120px;
   text-align: center;
   font-size: 12px;
}
/*und das in der media-queries.css*/
@media screen and (max-width: 600px){
   .product_inquiry {
      width:100%;
      margin: 50px -1000px 25px 0;;
   }
}
@media screen and (min-width: 601px){
   .product_inquiry {
      margin-left:160px;
   }
}
Dein template bindet die media-queries.css mitten in der Css rein. Ich weiß zwar nicht wie bei @mediaqueries die prioritäten sind bei den Style vergeben,doch ich kenne das immer so das die queries immer weit unten in der Css steht. Kann aber auch nur Zufall sein weil ich da noch nicht geschaut habe wie die prioritäten vergabe ist da. Vieleicht weiß das ja einer der hier mitlesen tut wie das da geregelt ist.

Aber wenn du jetzt in deiner Console kucken tust siehst du ja welche Angaben durchgestrichen sind und so weiter.Wenn du die doppelten Werte vergabe da raus nimmst dann sollte die Css ungefähr so ausehen wie mein Beispiel hier.

Was willst du den noch geändert haben da ?
 

Shorty1968

Erfahrenes Mitglied
#18
Sorry bin momentan im Stress aber vielen dank so hat es geklappt,ich werde mich mal genauer mit dem Reponsiven CSS auseinander setzen wenn der Stress nach lässt und ich mehr Zeit habe.

Im moment sieht es eigentlich ganz gut aus,wüsste nun nur noch der Preisvorschlag Button auf der Startseite in den Boxen der sitzt im Reponsiven Design nicht mittig und da habe ich auch noch Probleme warum nicht.