Ankündigung

Einklappen
Keine Ankündigung bisher.

Website für Mobilen Geräte optimieren

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Website für Mobilen Geräte optimieren

    Hallo,

    ich würde gerne meine Website für Mobilen Geräte optimieren. Wenn man meine Website auf Mobilen Geräten aufruft, dann ist der Text von ganz links bis ganz rechts und ohne Seitenabstand zum Rand. Wie kann ich das anders machen?

    AGW von AGW International

  • #2
    CSS anpassen, ggf. mit Flex Box und @mediaqueries benutzen.
    Finde gerade dein link nicht, aber denke mal das du da irgendwelche Werte nicht gesetzt hast oder falsche Werte eingetragen hast.
    Mein (Basti1012) Forum und Chat

    Kommentar


    • #3
      Hallo AGW,
      diese Frage ist zu allgemein, um die eine einzige passende Antwort zu geben Zudem weiß ich nicht wie gut dein Wissensstand in HTML und CSS ist. Ich gehe davon aus, dass diese bei fast 0 sind, da so eine Frage selbst bei Anfängern sehr schnell eine Antwort steht. Siehe das bitte nicht als Beleidigung, da sowas zum Grundwissen in HTML und CSS gehört.

      Abstände kannst du mithilfe von CSS steuern. Dafür muss das entsprechende Element mit CSS selektiert werden und mithilfe von Padding(Innenabstand) kann man den Innenabstand regeln. Wenn speziell nur für mobile Endgeräte die Seite angepasst werden soll, benötigst du Media-Queries zum Steuern der verschiedenen Größen des Displays etcp.

      Hier ein Beispiel:
      Code:
      @media (min-width: 400px) and (max-width: 1199px) {
         .deineKlasse {
            ...
            min-height: 300px;
            box-sizing: border-box;
            padding: 20px;
         }
      }
      Ich hoffe ich konnte dir weiterhelfen. Wenn du weitere Fragen hast, dann einfach ins Forum schreiben.

      Gruss Localfu
      PS: Wenn euch mein Post gefallen hat, dann lasst mir ein "Daumen hoch" da!

      Kommentar


      • #4
        Zitat von Localfu Beitrag anzeigen
        Hallo AGW,
        diese Frage ist zu allgemein, um die eine einzige passende Antwort zu geben Zudem weiß ich nicht wie gut dein Wissensstand in HTML und CSS ist. Ich gehe davon aus, dass diese bei fast 0 sind, da so eine Frage selbst bei Anfängern sehr schnell eine Antwort steht. Siehe das bitte nicht als Beleidigung, da sowas zum Grundwissen in HTML und CSS gehört.

        Abstände kannst du mithilfe von CSS steuern. Dafür muss das entsprechende Element mit CSS selektiert werden und mithilfe von Padding(Innenabstand) kann man den Innenabstand regeln. Wenn speziell nur für mobile Endgeräte die Seite angepasst werden soll, benötigst du Media-Queries zum Steuern der verschiedenen Größen des Displays etcp.

        Hier ein Beispiel:
        Code:
        @media (min-width: 400px) and (max-width: 1199px) {
        .deineKlasse {
        ...
        min-height: 300px;
        box-sizing: border-box;
        padding: 20px;
        }
        }
        Ich hoffe ich konnte dir weiterhelfen. Wenn du weitere Fragen hast, dann einfach ins Forum schreiben.

        Gruss Localfu
        Ich hatte schon einmal ein CSS Code nur den habe ich nicht mehr und weiß im auch nicht. Gibt es nicht ein Fertigen Code, wo der Text bei Mobilen Geräten nicht von Rand zu Rand geht, sondern mit einem Abstand zu Rand? Kannst du mir eine Website empfehlen, wo genau erklärt ist und mit Beispielen, die man nicht verändern muss, also gleich in CSS reinkopieren kann.
        Zuletzt geändert von AGW; 30.09.2020, 15:28.
        AGW von AGW International

        Kommentar


        • #5
          Kannst du mir eine Website empfehlen, wo genau erklärt ist und mit Beispielen, die man nicht verändern muss, also gleich in CSS reinkopieren kann.
          Ich fürchte, Du stellst dir das zu einfach vor. Es gibt viele Webseiten wo Aspekte von responsivem Design erklärt sind, auch mit Beispielen. Aber jede Website ist anders und auch die Übernahme von fertigem CSS setzt voraus, dass man die Zusammenhänge versteht. Und das setzt einen gewissen Lernvorgang voraus.

          Kommentar


          • #6
            Hallo,

            vermutlich ist seine AGW-international COM gemeint, da gibt es etliche CSS-Dateien, siehe

            HTML-Code:
            <!-- bootstrap css -->
            <link rel="stylesheet" href="css/bootstrap.min.css" />
            <!-- Site css -->
            <link rel="stylesheet" href="css/style.css" />
            <!-- responsive css -->
            <link rel="stylesheet" href="css/responsive.css" />
            <!-- colors css -->
            <link rel="stylesheet" href="css/colors1.css" />
            <!-- custom css -->
            <link rel="stylesheet" href="css/custom.css" />
            <!-- wow Animation css -->
            <link rel="stylesheet" href="css/animate.css" />
            <!-- revolution slider css -->
            <link rel="stylesheet" type="text/css" href="revolution/css/settings.css" />
            <link rel="stylesheet" type="text/css" href="revolution/css/layers.css" />
            <link rel="stylesheet" type="text/css" href="revolution/css/navigation.css" />
            Mal mit der Datei responsive.css anfangen, hier dürfte vermutlich der Fehler zu finden sein.

            Vielleicht hat einer der CSS-Profis Lust und Zeit - ansonsten viel Spass beim Fehlersuchen.

            daniel5959
            FindeLinks.de - Kurzinfos mit Linkempfehlung
            Homepage-FAQs.de - bleibt als Archiv online

            Kommentar


            • #7
              Versuche doch mal unter deinen ganzen CSS Kram das dazu zu schreiben (unter alles anderen)
              Code:
              <style>
              .row span {
              width: 100%;
              padding: 10px;
              }
              /* für deinen ewigen langen link */
              .row span a {
                   word-break: break-all;
              }
              </style>
              Teste das doch erstmal und dann sehen wir weiter
              ggf. in @mediaqueries reinschreiben, weil habe Desktop nicht testen können
              Mein (Basti1012) Forum und Chat

              Kommentar


              • #8
                Zitat von basti1012 Beitrag anzeigen
                Versuche doch mal unter deinen ganzen CSS Kram das dazu zu schreiben (unter alles anderen)
                Code:
                <style>
                .row span {
                width: 100%;
                padding: 10px;
                }
                /* für deinen ewigen langen link */
                .row span a {
                word-break: break-all;
                }
                </style>
                Teste das doch erstmal und dann sehen wir weiter
                ggf. in @mediaqueries reinschreiben, weil habe Desktop nicht testen können
                Also ich habe es in der Datei responsive.css ganz unten hingeschriben, ändert sich aber nichts.
                AGW von AGW International

                Kommentar


                • #9
                  Warum nimmst du kein html5 theme die es gratis gibt bei themeforest oder colorlib und setzt die Texte da rein.
                  Dabei hast du auch die Chance mehr zu lernen, zum Beispiel seine Arbeiten immer nur mit Vorhandener Sicherheitsabspeicherung anzufangen.
                  html5 Editoren wie Brackets gibt's auch gratis.
                  https://arnego2.com <Webseiten, Umbau ab €80 und einiges mehr>

                  VPS 8GB RAM 50 GB ROM < Server in der EU, 1rstes Jahr €37

                  Kommentar


                  • #10
                    Ich finde die CSS nicht die du eingetragen hast.
                    Außerdem sagte ich unter alles andere.
                    Setze das mal am Ende des </head>
                    Code:
                    <style> .row span { width: 100%; padding: 10px; } /* für deinen ewigen langen link */ .row span a { word-break: break-all; } </style>
                    </head>
                    </body>
                    ohne </head></body>
                    Mein (Basti1012) Forum und Chat

                    Kommentar


                    • #11
                      Zitat von basti1012 Beitrag anzeigen
                      Ich finde die CSS nicht die du eingetragen hast.
                      Außerdem sagte ich unter alles andere.
                      Setze das mal am Ende des </head>
                      Code:
                      <style> .row span { width: 100%; padding: 10px; } /* für deinen ewigen langen link */ .row span a { word-break: break-all; } </style>
                      </head>
                      </body>
                      ohne </head></body>
                      Habe ich gemacht, aber nur jetzt sind die Links beim Header nicht richtig, also eins ist oben der andere ein spur weiter unter, also nich in einer Reihe. https://www.agw-international.com/
                      AGW von AGW International

                      Kommentar


                      • #12
                        Dann benutze not()
                        Du siehst an der CSS ja wie du die Schrift bei der Mobilen Ansicht in der Mitte und vom Rand weg bekommst.
                        Das wird wahrscheinlich nicht auf allen Seiten passen.
                        Das musst du selber durch Gucken oder wenn du eine CMS benutzt, wo du das auf allen Seiten anwenden kannst.
                        Auf der Startseite kannst du deinen Header Link ja einfach ausschließen.
                        Code:
                        .row span:not(.icon i_mail_icon) {
                            width: 100%;
                            padding: 10px;
                        }
                        /* für deinen ewigen langen link */
                        .row span:not(.icon i_mail_icon) a {
                            word-break: break-all;
                        }
                        Du musst mal einfach probieren und ggf. dir CSS Tutorials durchlesen wie man was machen kann, dann bekommst du solche Kleinigkeiten bestimmt auch selber hin.
                        Mein (Basti1012) Forum und Chat

                        Kommentar


                        • #13
                          Hi,

                          ich habe zu Beginn auch meine Probleme damit gehabt, weil ich dort einige Denkfehler hatte. Wenn man es aber einmal verstanden hat, ist es unproblematisch.

                          Hier der Link zu dem Tutorial, nachdem bei mir der Groschen gefallen ist xD
                          https://www.w3schools.com/css/css_rwd_intro.asp

                          Ich hoffe, das bringt Dich weiter.

                          Kommentar

                          homepage-forum.de - Hilfe für Webmaster! Statistiken

                          Einklappen

                          Themen: 56.710   Beiträge: 429.176   Mitglieder: 28.471   Aktive Mitglieder: 45
                          Willkommen an unser neuestes Mitglied, hypnoseewaldpipperbremen.

                          Online-Benutzer

                          Einklappen

                          182 Benutzer sind jetzt online. Registrierte Benutzer: 4, Gäste: 178.

                          Mit 3.502 Benutzern waren am 23.01.2020 um 17:20 die meisten Benutzer gleichzeitig online.

                          Die neuesten Themen

                          Einklappen

                          Die neuesten Beiträge

                          Einklappen

                          • ST747
                            SPAM an andere mailadresse
                            hallo, ich hatte da eine glücksspielwebsite kontaktiert über mail und auch eine antwort erhalten.
                            vorsorglich habe ich eine zweitrangige mailadresse angegeben.
                            jetzt bekomme ich spammails für glücksspiele z.b. aus .fr (Frankreich).
                            aber das mail ging nicht an die zweitrangig mailadresse...
                            28.09.2020, 18:12
                          • ST747
                            Antwort auf SPAM an andere mailadresse
                            hallo, ich habe vorsorglich mehrere mailadressen verwendet.
                            dabei für alles was mit domäne zu tun hat, eine eigene mailadresse verwendet.
                            jetzt war die Sache einfach, über filter habe ich nur die bestimmten absender
                            zugelassen, wie den provider und domrobot.
                            über ausschluss/verwerfen...
                            Gestern, 17:20
                          • ST747
                            Schriftgröße in Kästchen
                            Hallo, besonders beim Text in Kästchen funktioniert die Darstellung Text NICHT richtig,wenn der Benutzer über den Bowser die Schriftgröße einstellt. (mit zoom geht das richtig).
                            Ich habe mit z.B. das Kästchen mit width: 14% und die Schrift font-size: 90% eingestellt, natürlich mit mehreren...
                            14.10.2020, 21:48
                          • ST747
                            Antwort auf Schriftgröße in Kästchen
                            hi,

                            ich habe das Thema abgeschlossen.Mit REM habe ich aber nicht mein Ziel erreicht.
                            Trotzdem verwende ich jetzt REM, aber nicht für die Kästchen.
                            Dabei habe ich den 62,5% Trick erfahren.
                            Mit css Body und font-size 62,5% kann man das auf 10px definieren
                            und dann...
                            Gestern, 17:13
                          • AGW
                            zu WordPress wechseln
                            Hallo,

                            ich möchte gerne zu WordPress wechseln, nur jetzt meine Fragen kann ich meine Seiten genauso übernehmen, nur Text, mit Links und Bilder ohne was zu ändern und wie kann ich die Links bei behalten z.B. /samsung/ .
                            ...
                            19.10.2020, 19:24
                          • AGW
                            Antwort auf zu WordPress wechseln
                            Danke...
                            Gestern, 17:10
                          • admin
                            Antwort auf zu WordPress wechseln
                            AGW ich würde das Google Site Kit empfehlen ;-)

                            Link: https://wordpress.org/plugins/google-site-kit/

                            Gruß Karl
                            Gestern, 15:53
                          • Premium-Backlinks
                            Backlinks für Seo: Monatlicher Premium-Linkaufbau ab 350,- Euro
                            Backlinks sind nach wie vor ein unverzichtbarer Faktor, um in Google Spitzenpositionen erreichen und halten zu können. Dabei ist es von äußerster Wichtigkeit jemanden mit dem Aufbau von Backlinks zu betrauen, der genau weiß, welche Backlinks im Einzelfall benötigt werden und welche auf keinen Fall...
                            19.10.2020, 03:11
                          • daniel5959
                            Antwort auf Backlinks für Seo: Monatlicher Premium-Linkaufbau ab 350,- Euro
                            Hallo,

                            anderswo gibt es weitere Infos - siehe



                            Nur wie eine "professionelle Linkaufbau-Agentur" und "langjährige Erfahrung" sowie "professionelle Redakteure" sich mit "Kleinunternehmerin" in Einklang bringen lassen, das...
                            Gestern, 14:57
                          • silent
                            Diashow
                            Guten Tag,
                            ich möchte in meiner rechten Div ein Informations-Panal hinzufügen, welches man mit Bildern jederzeit updaten kann. Die Bilder sollen per Diashow angezeigt werden. Das funktioniert auch alles reibungslos. Mein Problem ist es, das ich das nicht hinbekomme, dass sich die Bilder automatisch...
                            Gestern, 09:13
                          Lädt...
                          X