[Erledigt] Responsive-Plug-In Fakten modifiziert

Hallo liebe Community,

das Plug-In „Fakten“ habe ich ein wenig aufgewertet, indem ich den Fakten einen Rahmen, weißen Background und Hover-Effekte hinzugefügt habe.

Dazu habe ich die „sqwpluginfacts.css“ aus dem Ordner „plugins“ (C:\Program Files (x86)\SIQUANDO\Web 10\plugins\SQWPluginFacts) in die style_content.css des Designs kopiert und folgende Modifikationen hinzugefügt.

Geändert habe ich den Originaleintrag:

ul.sqwpluginfacts > li {
 display: block;
 list-style: none;
 margin: 0 4% 20px 0;
 padding: 0;
 float: left;
 box-sizing: border-box;
}

in

ul.sqwpluginfacts > li {
 display: block;
 list-style: none;
 margin: 0 4% 20px 0;
 padding: 4% 2%!important;
 float: left;
 box-sizing: border-box;
 border: 1px solid #ddd;
 -webkit-box-shadow: 2px 2px 20px -4px rgba(217,217,217,1);
 -moz-box-shadow: 2px 2px 20px -4px rgba(217,217,217,1);
 box-shadow: 2px 2px 20px -4px rgba(217,217,217,1);
	-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
 transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

Neu hinzugefügt habe ich:

.sqwpluginfacts li:hover {
 box-shadow: 0 0 11px rgba(33,33,33,.2); 
 -webkit-transform: scale(1.05, 1.05);
 transform: scale(1.05, 1.05);
}
.sqwpluginfacts li:hover::after {
 opacity: 8;
}
.sqwpluginfacts li:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
 opacity: 0;
 -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
 transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
Vor 
ul.sqwpluginfacts > li:last-child {
 margin-right: 0;
}

Das war es eigentlich auch schon. Nun habe ich das Problem, dass in der Mobilansicht keine Paddings gesetzt werden, aber in der Desktopversion sehr wohl, was meiner Meinung nach auch echt klasse aussieht.

Wenn ich in der [@media (max-width: 767px) ] Paddingwerte 0 5px oder 0 1%, hat dies in der mobilen Ansicht keine Auswirkung, selbst mit einem !important und oder z-index. Die @media (max-width: 767px) lautet wie folgt:

@media (max-width: 767px) {
 ul.sqwpluginfacts2cols > li,
 ul.sqwpluginfacts3cols > li,
 ul.sqwpluginfacts4cols > li,
	ul.sqwpluginfacts5cols > li	{
  width: 100%;
  margin: 0 0 40px 0;
  float: none;
 }
}

Meine Frage: Was kann ich tun, damit die modifizierten Fakten auch in der mobilen Ansicht schick aussehen?

Bild 1 – Desktopansicht Bild 2 – Mobile Ansicht

Danke für einen eventuell lösenden Hinweis!

Data

Edit: 16:41 Uhr - Keine Lust auf unnötige Diskussionen! Danke!

Fakten Desktop.JPG Fakten-mobil.JPG

Du kannst doch, wenn eine Testseite vorhanden ist, selbst die Ansicht verkleinern, das selbst auf einen Desktop die mobile Ansicht dargestellt wird und hier dann im Browser mit der Funktion "Element untersuchen" schauen, wo man noch anpacken muß. 

Ansonsten ist es immer besser, wenn im Forum gefragt wird, selbst eine URL anzugeben.... . Nur so kann man auch selbst mal schauen. 

Hallo Herr Paulemann,

als ich mich hier anmeldete war mir so als, dass ich -so glaub ich zu mindest - erklärte, dass ich gar kein Webspace habe und einige Desktop-CMS' so für mich teste und ausprobiere. Ich kann also kein LINK zeigen wo (Helfende) eben mal so drüberschauen könnten.

Was ich wie und wo geändert bzw. ergänzt habe, habe ich ja im Post 1 aufgezeigt. Klar ist mir klar, dass niemand lust hat das nachzubauen um dann mein Problem zu sehen und eventuell ein Tipp zu geben.

Ich hatte aber schon gehofft, das ein Profi vielleicht auf den ersten Blick erkennt, worann das Problem liegen könnte? Vielleicht kommt ja irgendwann der entsprechende Hinweis, oder ich habe es dann vielleicht selbst gelöst - dass ich natürlich hier dann auch erwähne -.

Grüße Data

Tja, Punkt 1 wußte ich nicht....aber mein Tipp mit dem Auslesen müßte auch in der lokalen Ansicht (Vorschaufunktion) funktionieren.

Vielleicht liest Thomas (Karo) hier mal rein, dem traue ich den "ersten Blick" zu....

Na ja, ganz so wichtig ist das Ganze ja nicht. Sieht halt in der mobilen Ansicht halt bescheiden aus, mehr nicht. Ok, vielleicht kennt jemand irgendwann mal eine Lösung.

Wie gesagt, ich spiele halt nur einwenig mit den Standart-Responsiven Design von Siquando und schau ob man da nicht OPTISCH etwas mehr rausholen kann?

Danke für dein Statement! Grüße Data

Ich kann deinen Gedankengang dazu nicht ganz nachvollziehen. Du bist mit irgendetwas nicht zufrieden (in deinem Fall der Klasse sqrpluginfacts) und änderst es. Danach gefällt es dir in der mobilen Ansicht nicht und du änderst für die mobile Auflösung was anderes (in deinem Fall die Klassen sqrpluginfacts2cols etc.)? Im Normalfall ist es so, daß das Gulasch nicht besser wird, wenn du die Semmelknödl nachwürzt.

MH, so ganz kann ich dich nicht verstehen? Aber sei es drum. Ich weiss nicht was ich mit deinem Post anfangen soll? Grüße Data

Gegenfrage: Was wäre notwendig damit es schick aussieht?