Probleme mit Ansicht auf Smartphone und teilweise Desktop

Thema wurde von rudolf_leyrer, 30. März 2019 erstellt.

  1. rudolf_leyrer
    rudolf_leyrer Mitglied
    Registriert seit:
    21. März 2019
    Beiträge:
    16
    Danke erhalten:
    0
    Danke vergeben:
    1
    Guten Morgen!

    Ich habe wieder mal ein Problem. Es ist folgendes dass die Ansicht auf Desktop PC passt, wenn ich jedoch am Tablet oder Smartphone schaue, passt einiges nicht. Entweder sind die ganzen Buttons oder der Text verschoben, Hintergründe werden weiß statt transparent angezeigt, oder der Bildgrößen passen sich nicht an. Ich habe schon versucht die Bilder auf 100% zu stellen, aber das bringt auch nicht den gewünschten Effekt einer responsiven Darstellung, denn in kleineren Auflösungen werden auch diese dann falsch dargestellt. Ich habe auch schon in der CSS versucht die Darstellung bestimmter Elemente auf Smartphones mit @media and {max-width: 320px;} versucht, es hilft alle nichts. Wie macht man die Bilder am besten responsive? Oder in welcher Datei muss ich diese Dinge ändern dass sämtliche Bilder, angefangen von der Startseite bis hin zu den Boxen, responsive und auch korrekt dargestellt werden. Ich habe mal ein Bild angefügt, wo man sieht, dass am Smartphone der Hintergrund weiß statt transparent ist, der Text verschoben, und die Bildgröße auch nicht wirklich passt. Vielen lieben Dank!
     

    Anhänge:

  2. Dennis (MotivMonster.de)
    Dennis (MotivMonster.de) G-WARD 2013/14/15/16
    Registriert seit:
    22. September 2011
    Beiträge:
    31.303
    Danke erhalten:
    6.268
    Danke vergeben:
    1.118
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    Hi,
    für die 3 Darstellungsgrößen gibt es jeweils CSS Befehle, wenn du im Style Editor bastelst musst du immer für alles alle 3 Versionen machen.
    Bei eigenem CSS z.B. musst du immer für alle 3 Ansichten definieren oder Global.

    Man könnte nun nachsehen was das bei dir ist, ABER du hast keinen Link zum Shop.
    Bildchen sind schön für zu zeigen was man meint. ABER sie zeigen uns nicht wie der BRowser das erzeugt. CSS html. daher bei designfragen zu 990,9% immer ein Link erforderlich damit man sich ds real ansehen kann. sonst wird nur geraten
     
  3. Dennis (MotivMonster.de)
    Dennis (MotivMonster.de) G-WARD 2013/14/15/16
    Registriert seit:
    22. September 2011
    Beiträge:
    31.303
    Danke erhalten:
    6.268
    Danke vergeben:
    1.118
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    und erstellenauch rel. günstig individuelles und sehr schnell und gut.
     
  4. rudolf_leyrer
    rudolf_leyrer Mitglied
    Registriert seit:
    21. März 2019
    Beiträge:
    16
    Danke erhalten:
    0
    Danke vergeben:
    1
    #4 rudolf_leyrer, 30. März 2019
    Zuletzt bearbeitet: 30. März 2019
    und wo lade ich die bilder hin für alle 3 versionen? habe nur eine bilddatei für die jeweiligen elemente hochgeladen bzw im styledit ausgewählt. da kann man ja nur eine datei auswählen? link hab ich deswegen keinen, weil der shop noch nicht online ist :/ ich kann einen temporären account erstellen und dir die zugangsdaten schicken?!

    vielen dank!

    EDIT: Ich lass den shop eine zeit lang on! bitte um hilfe! Danke! www.cannaseur-cbd.at

    lg
     
  5. rudolf_leyrer
    rudolf_leyrer Mitglied
    Registriert seit:
    21. März 2019
    Beiträge:
    16
    Danke erhalten:
    0
    Danke vergeben:
    1
    ich habe die bilder, aber wenn du das geschriebene verstehen würdest dann war das nicht meine frage. sorry bevor irgend ein müll als antwort kommt, kannst entweder eine vernünftige antwort dazu geben, oder es eben bleiben lassen
     
  6. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Code:
    .panel-default .panel-heading {
        text-align: center;
    }
    
    damit geht der Text der Überschrift schon mal in die Mitte

    Dann Arbeitest Du mit festen Größen - das ist Gift für responsive Designs.

    Code:
    .panel-default .panel-body {
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
        background-color: rgba(255, 255, 255, 0);
        background-image: url(assets/images/custom/TextBG_Black_226x174.png);
        background-position: 50% 50%;
        background-repeat: no-repeat;
       [COLOR=#ff0000] background-size: 100% 100%;[/COLOR]
        background-attachment: scroll;
    }
    mit dem Wert statt festen px sieht die Box dann so aus:
    Unbenannt.PNG Unbenannt-1.PNG
     
  7. rudolf_leyrer
    rudolf_leyrer Mitglied
    Registriert seit:
    21. März 2019
    Beiträge:
    16
    Danke erhalten:
    0
    Danke vergeben:
    1
    Vielen Dank Barbara ich werde mir das mal ansehen, wie bekomme ich den weißen hintergrund weg? ich passe gerade das css an die verschiedenen auflösungen an. das funktioniert ganz gut für alle auflösungen ab tablet portrait. bei smartphone auflösung ändert sich absolut nichts was ich davon ändere. dachte smartphone ist standard im bootstrap? bei den anderen auflösungen schreib ich alles in @media etc ... ich versuche den text container für smartphone zu verkleinern da ändert sich nichts. bei allen anderen auflösungen funktioniert es?!
     
  8. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Code:
    .panel-default .panel-body {
        background-color: black;
    }
    das "black" musst du gegen Deinen Farbcode tauschen (der Code braucht dann das "#" am Anfang)
    Smartphone ist die Grundeinstellung, aber wenn es z.B. ein "hidden-xs" gibt und der Bereich für Smartphone anders heißt, funkt das nicht.
     
  9. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    30. Oktober 2015
    Beiträge:
    2.349
    Danke erhalten:
    573
    Danke vergeben:
    506
    Wenn dir mein Rat nicht gefällt, du diesen nicht verstehen willst oder kannst, ist das tragisch, aber nicht zu ändern.

    Du scheinst dich lieber wochenlang mit dem Template beschäftigen zu wollen, anstatt das von sehr kostengünstigen Profis schnell und effizient erledigen zu lassen und deine Zeit auf die wichtigeren Sachen im Shop zu verwenden. Nach dem, was ich da vorhin gesehen habe, steckt dort noch eine Menge Arbeit drin.

    Mir fällt allerdings auch weitaus Besseres ein, als meine kostbare freie Zeit für dich zu verschwenden.
     
  10. rudolf_leyrer
    rudolf_leyrer Mitglied
    Registriert seit:
    21. März 2019
    Beiträge:
    16
    Danke erhalten:
    0
    Danke vergeben:
    1
    Vielen Dank, ich werde das ganze beherzigen und mal versuchen. Wie gesagt, ich versuche im Moment das Design für die verschiedenen Auflösungen anzupassen, es funktioniert ganz gut bei den größeren, also ab Tablet aufwärts. Nur hab ich absolut keinen Schimmer für das Smartphone. Es ändert sich rein gar nichts. Woher weiß ich denn wie die Bereiche für die Smartphones heißen? Finde ich das raus, wenn ich die Elemente untersuche im Firefox? Das hat mir zB bei den anderen Auflösungen geholfen. Danke

    Weil ich das erstmal selbst alles ausprobieren möchte. Und bevor ich da jetzt nochmals Geld ausgebe, kann ich das doch mal versuchen oder nicht? Das kann ich im Nachhinein auch noch machen, wenn ich mit dem Endergebnis dann nicht zufrieden bin. Und wochenlang ist einfach nicht richtig. Ich habe diese Shoplösung jetzt erst gute 1,5 Wochen. Also da wird man doch ein bisschen ausprobieren und vielleicht ein paar Dinge lernen dürfen? Tut mir leid, dass ich auf deine mehrfach gepostete Werbung nicht eingeangen bin, aber es scheint mir so, also ob du da mitverdienst so oft wie du die Profis da jetzt schon erwähnt hast, aber wie gesagt ich versuche ich erst einmal selbst bevor ich weiteres Geld ausgebe. Vielen Dank für Dein Verständnis! Lg
     
  11. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    11. Februar 2015
    Beiträge:
    1.291
    Danke erhalten:
    401
    Danke vergeben:
    237
    #11 Anonymous, 31. März 2019
    Zuletzt bearbeitet: 31. März 2019
    Deine völlig falsche Einschätzung von Devils Empfehlung Dich an einen Dienstleister zu wenden, resultiert aus der Art Deiner Fragestellung. Hättest Du Ahnung von CSS (oder Templatedesign generell), hättest Du diesen Thread nicht eröffnen müssen, sondern das Template ganz einfach Deinen Erfordernissen angepasst.
    Es steht natürlich jedem frei, seine Zeit damit zu verbringen, womit er möchte. Andererseits sollte man davon ausgehen können dass ein Unternehmer (und dabei handelt es sich bei Webshopbetreibern im allgemeinen) seine Zeit nicht mit dem Lösen von Problemen verbringt die nicht zu seinen Kernkompetenzen zählen, sondern sich auf unternehmerische Aufgaben konzentriert. Das ist der Grund warum ich z.B. nicht um 15 Uhr damit anfange die Werkstatt zu fegen, sondern in der Zeit Angebote schreibe oder Kundentelefonate führe und das Aufräumen und Saubermachen von einem Mitarbeiter erledigen lasse.

    Im allgemeinen stimmt auch hier der Satz "Wer Geld verdienen will, der muß Geld ausgeben". Zu wissen wann, wieviel und wofür man Geld ausgibt ist das Geheimnis einer erfolgreichen Geschäftsführung.
    Ist man im Ecommerce tätig und selber kein Grafiker, Designer und Templatespezialist, dann ist der Tipp Geld hierfür auszugeben nicht der schlechteste.
    Und wenn jemand hier die Fa. Netdexx empfiehlt, dann liegt das nicht daran dass er dafür Provision erhält, sondern daran daß es kaum jemanden gibt (ich habe zumindest noch niemand anderen gefunden), der solch professionelle Dienstleistungen und so schnellen und qualitativ hochwertigen Support für einen solch vernünftigen Preis anbietet, wie eben die Fa. Netdexx.
     
  12. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Ich kann @rudolf_leyrer gut verstehen :)
    Wenn man wissen möchte wie etwas funktioniert, probiert man es aus.
    Wer lernen will, wie man den Shop stylt, der muss es selber machen.
    Hat man dann dafür keine Geduld oder 2 linke Hände, dann sucht man sich den Fachmann, der das "Trümmerfeld" beseitigt. :D
     
  13. Dennis (MotivMonster.de)
    Dennis (MotivMonster.de) G-WARD 2013/14/15/16
    Registriert seit:
    22. September 2011
    Beiträge:
    31.303
    Danke erhalten:
    6.268
    Danke vergeben:
    1.118
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    Man hat mir in einem Zwangs-Seminar mal gesagt: Tue das was du am Besten kannst und womit du Geld verdienst und lass den Rest von Dienstleistern erledigen. z.B. Steuerberater, Designer, Fensterputzer, Reinigung, usw.
    Wenn man die Zeit in Produkte und Verkaufen steckt hat man meist mehr gewonnen als wenn man alles selbst macht und für die eigentliche Arbeit mit der man Umsatz macht keine Zeit mehr da ist.
    Man kann aus Kostengründen vieles selbst machen und auf ersten Blick sieht das tolol nach gespratem Geld aus, langfristig fehlt die Zeit aber in der Verkaufszeit was sich dann über Jahre hinweg zieht, da du das nie aufholen kannst.
    Beispiel: Dein SHop geht dank Dienstleister der dir das Template macht 1 Monat früher online. Google indexiert dich 1 Monat früher, erster Umsatz kommt früher UND du steckst mehr Zeit in die Produkte (Bilder, Texte).
    Was ddenkst du hat dich langfristig mehr Geld gekostet?

    Ich verstehe den Drang alles selbst zu machen. Nach deien späteren Antworten zu urteilen, kannst ja bischen CSS und dir fehlte der Richtige Ansatz. Aber verzettel dich nicht in sowas. Feinheiten kann man immer machen. Die Zeit die man nicht online war gewinnt man nie wieder zurück.
    Machs es ruhig selbst, da spricht nichts dagegen, mein Tipp ist nur, nicht zu sehr verzetteln. Mach das Rechtliche und die ersten Artikel präsentierbar und das Design so das es akzeptabel ist und geh online damit google anfängt dich kennen zu lernenen. Das Feintuning am Design kannst dann immer noch machen. Bis erste Kunden kommen dauert idR etwas ausser man ist schon bekannt.
    so genug OT.

    Wichtigste sagte Barbara ja. Bei eigenem CSS immer responsive denken. Mit variablen Breiten arbeiten statt festen werten (min. max kann man aber fest angeben wenn es hilfreich ist).

    Hilfreich ist es oft bei testshops oder anderen zu schauen wie die das CSS gemacht haben :)
     
  14. markus_wick
    markus_wick Erfahrener Benutzer
    Registriert seit:
    10. Oktober 2018
    Beiträge:
    982
    Danke erhalten:
    222
    Danke vergeben:
    156
    Ich häng mich jetzt hier kurz mal rein :)

    Mir ist in letzter Zeit aufgefallen, dass es sehr viel "emotionale" Diskussionen gibt bei einfachen Fragen....
    Ein bisschen weniger Streit und ein wenig mehr konstruktives wäre wohl das eine oder andere Mal angesagt...
    Ich verstehe Dennis ab und an, dass er sich aufregt, aber Dennis: Manchmal ist es ein wenig heftig, was Du von Dir gibst. Zwar im Prinzip meist irgendwie richtig aber eben unter Ignoranz der eigentlichen Frage.
    Barbara macht das aus meiner Sicht etwas... freundlicher: Eingehen auf die eigentliche Frage, aber auch Hinweis auf das grundsätzliche Problem.

    Wenn ich z.B. eine Frage zur Headerhöhe habe, dann freue ich mich über eine Antwort zur Headerhöhe und dem zugehörigen CSS. Wenn dann erst mal nur kommt "Dein Header ist überhaupt Kacke, da ist die Höhe das kleinste Problem", dann hat das halt nur bedingt mit der Frage zu tun... Selbst wenn es stimmen sollte.
    Wenn mich eine alte Dame fragt, ob ich ihr über die Strasse helfen kann, dann helfe ich ihr erst mal über die Strasse. Aber ich fange mit ihr doch keine Diskussion darüber an, was sie denn überhaupt auf der anderen Seite will, weil da drüben ist doch eh nix interessantes und überhaupt sind ihre Schuhe ja völlig ungeeignet für die andere Seite und und und....

    Denkt doch bitte an einen freundlichen Umgang mit einander. Wäre schön.
    Ich meine, wenn einem eine gestellte Frage nicht passt kann man die auch einfach ignorieren, anstatt die Diskussion gleich auf Vorwurfsniveau zu ziehen...

    Wie sagt man so schön: Just my 2 cents...
    Peace :)
     
  15. Dennis (MotivMonster.de)
    Dennis (MotivMonster.de) G-WARD 2013/14/15/16
    Registriert seit:
    22. September 2011
    Beiträge:
    31.303
    Danke erhalten:
    6.268
    Danke vergeben:
    1.118
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    Ich habs viel mit frendlich versucht früher. Meist hilft es aber mehr den anderen zum nachdenken und umdenken zu bewegen wenn du knallhart bist. Ich mach das nicht böswillig. Auch nicht weil ich dem anderen schaden will sondern weil ich ihm die oft sinnlos verschwendete Zeit ersparen möchte. Man kann vieles über verschiedene Wege machen. Meiner ist sicher nicht immer der Beste aber oft viel effektiver und zielführender als das was der andere da vorhat. Viele verzetteln sich mit Firlefanz statt zu verkaufen. Ich bekomm auch öfters von Wilken dann mal einen drüber wenn ich zu hart war oder zu extrem gewesen bin. (Meist über FB MSG. dann) Bin aber nicht nachtragend oder so wenn einer genauso antwortet.
    Im Grunde stimmt das. Aber er fragt sonst nicht nach dem Header und es hilft ihm und seinen Kunden nicht wenn der Header zwar seiner Meinung nach die Richtige Höhe hat, aber ansonsten total scheiße aussieht. Er muss ja nicht drauf eingehen, es ist nur ein gut gemeinter Hinweis dann. Genauso wie ich der alten Frau sagen würde das sie sich doch mal neue Schuhe besorgen sollte wenn die fast auseinander fallen während ich sie über die Straße begleite :)

    Man kann das immer auf 2 Arten sehen. Du sagst einem nur das was er höhren will und was ihn nur das bischen weiterbringt auch wenns falsch ist oder du bist offen und sagst ihm alles was dir nebenbei noch auffällt zu dem Bereich. Ich denke der 2. Weg hilft dir am Ende mehr auch wenn er härter zu ertragen ist.

    Ich kann dir das aber auch gerne durch die Blumen oder überhaupt nicht sagen, aber das hilft dir dann nicht vielleicht mehr zu verkaufen am Ende.
    Aber für alle die das nun lesen, wenn ich einem zu direkt war, sagt das ruhig. Ich vertrag das :) Und nie persönlich nehmen ich betrachte jede Frage erstmal als neu und ohne Vorurteile aus vorherigen Diskussionen oder Meinungsverschiedenheiten :) Auch wenns hart ist, ich meins nur gut.
     
  16. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    11. Februar 2015
    Beiträge:
    1.291
    Danke erhalten:
    401
    Danke vergeben:
    237
    Herrlich!

    Bonus:
    Wenn man Markus´ Beitrag liest und dann Dennis´ direkte Antwort darauf, dann bekommt man eine Ahnung der Antwort auf die Frage warum es keinen Frieden auf der Welt gibt.
     
  17. CITYJEWELS
    CITYJEWELS Erfahrener Benutzer
    Registriert seit:
    13. März 2015
    Beiträge:
    683
    Danke erhalten:
    170
    Danke vergeben:
    337
    Auch wenn es inhaltlich nachvollziehbar ist, sollte man so etwas deutlichst freundlicher formulieren.
    Wir sind hier in einem Forum in dem auf freiwilliger Basis geantwortet und geholfen wird.
     
  18. Dennis (MotivMonster.de)
    Dennis (MotivMonster.de) G-WARD 2013/14/15/16
    Registriert seit:
    22. September 2011
    Beiträge:
    31.303
    Danke erhalten:
    6.268
    Danke vergeben:
    1.118
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    Der Unterschied ist aber, ich bleibe bei Worten und verabscheue Gewalt (Auch wenns manchmal die einzig wahre Antwort wäre)
     
  19. rudolf_leyrer
    rudolf_leyrer Mitglied
    Registriert seit:
    21. März 2019
    Beiträge:
    16
    Danke erhalten:
    0
    Danke vergeben:
    1
    Ohne zu sehr auf die Beiträge einzugehen, möchte ich mich entschuldigen falls etwas falsch aufgenommen wurde oder falsch rüber gekommen ist. Möglicherweise habe ich es auch falsch verstanden und habe mich dabei in einer Form angegriffen gefühlt. Entschuldigung dafür!

    Ich habe den Shop nach meinen Bedürfnissen angepasst, es sieht auch auf allen Endgeräten so aus wie ich es wollte, außer am Smartphone, was eigentlich heutzutage einer der wichtigsten Benutzergruppen darstellt. Das liegt mir etwas im Magen und das war eigentlich auch meine Frage, wie ich die Elemente fürs Smartphone anpasse. Ich habe es mit Media Queries versucht, was aber nichts gebracht hat bzw hat sich nichts geändert. Was mich daran stört ist, dass alles so zusammen gerückt ist und absolut kein Abstand dazwischen und im Landscape Format ist alles so gestreckt und verzerrt. Vielleicht kann mir jemand dabei helfen bzw. mir einen Ansatz dafür geben, dieses Problem zu beheben?!

    Ich wäre zumindest dankbar, im Anhang die Bilder die mein Problem verdeutlichen sollen.

    Vielen Dank und liebe Grüße
     

    Anhänge:

  20. Dennis (MotivMonster.de)
    Dennis (MotivMonster.de) G-WARD 2013/14/15/16
    Registriert seit:
    22. September 2011
    Beiträge:
    31.303
    Danke erhalten:
    6.268
    Danke vergeben:
    1.118
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    Man bräuchte den Link zu deiner Seite damit man den css code sehen kann.

    Schau mal was du bei den Grid SPalten im SE eingestellt hast. Meist ist es da was verstelltes.
    Oder eben falsche SPalten und Media ANgaben. Sieht man auf Fotos leider nicht.