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?
    Zuletzt geändert von AGW; 26.10.2020, 09:08.
    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, 16: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 - seit Ende 2020 offline

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

                  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


                          • #14
                            Zitat von AGW Beitrag anzeigen
                            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?
                            Ich habe in einem anderen Beitrag gelesen, dass du jetzt WordPress verwendest. Hier ist es ganz leicht, deine Webseite responsive zu gestalten. Viele gehen sogar so vor, dass sie ihre Webseite zuerst für Smartphones gestalten und dann erst für den Desktop (Mobile First). Die meisten Themes die du verwenden kannst, sind auch schon für Smartphones optimiert.

                            Kommentar

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

                            Einklappen

                            Themen: 56.776   Beiträge: 429.827   Mitglieder: 28.527   Aktive Mitglieder: 53
                            Willkommen an unser neuestes Mitglied, McFrey72.

                            Online-Benutzer

                            Einklappen

                            233 Benutzer sind jetzt online. Registrierte Benutzer: 1, Gäste: 232.

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

                            Die neuesten Themen

                            Einklappen

                            • ST747
                              Antwort auf Bing BOT webmaster
                              o.k.,jetzt ist mir das klar, alles o.k., hatte den bingbot falsch verstanden.

                              Ich dachte, da muss ich meine ip-adresse von meinem server eingeben.
                              aber damit kann ich prüfen, ob mit der richtigen ip-adresse von bingbot auf meine
                              site zugegriffen wird. muss man also nicht machen,...
                              Gestern, 19:29
                            • daniel5959
                              Antwort auf SSL-Zertifikat bzw. DNS Eintrag bei evanzo???
                              Hallo,

                              die .htaccess wird gebraucht, um von den alten HTTP-Adressen zu den sicheren HTTPS-Adressen weiterzuleisten.

                              Seiten, die schon länger im Internet sind, sind auf anderen Webseiten noch mit den alten HTTP-Adressen verlinkt und hierfür braucht es die Weiterleitungen per...
                              Gestern, 19:17
                            • Mys87
                              Antwort auf SSL-Zertifikat bzw. DNS Eintrag bei evanzo???
                              Ja, ich habe es mittlerweile mit Hilfe des Supports (man muss nicht anrufen, man kann auch ein Ticket öffnen und bekommt ganz bequem und schnell eine Antwort per Mail) hinbekommen. Es ist tatsächlich ganz einfach, man muss halt nur wissen wie ;-)

                              1. Im Plesk gibt es den Menüpunkt Let's...
                              Gestern, 18:12
                            • Sempervivum
                              Antwort auf Welchen Editor kommt bei euch zum Einsatz
                              Danke, x-Debug ist konfiguriert, am Anfang funktioniert ja auch immer alles. Ich benutze nicht Apache sondern aus historischen Gründen IIS Express. Ob es wohl daran liegt?
                              Gestern, 17:49
                            • Megabyte
                              Antwort auf Welchen Editor kommt bei euch zum Einsatz
                              Hallo Sempervivum

                              Ich nutze auch das AddOn von Felix Becker. Das Aufhängen hat (denke ich) Konfig-Ursachen. Die ist kniffig und nachdem ich heute das nochmals startete - siehe da: geht auch nicht mehr *muahahahaha*. Werde es nochmals konfigurieren müssen.

                              Wichtig: 'PHP Debug'...
                              Gestern, 17:42

                            Die neuesten Beiträge

                            Einklappen

                            • ST747
                              Bing BOT webmaster
                              Hallo, ich habe für 2 webseiten das webspace-packet einfach getauscht,
                              da das eine einen größeren leistungsumfang hat.
                              jetzt funktioniert aber der bing-bot nicht mehr.
                              ggf. habe ich da auch eine datei vertauscht.
                              bei provider ist natürlich auch die ip-adresse für der server...
                              17.01.2021, 15:43
                            • ST747
                              Antwort auf Bing BOT webmaster
                              o.k.,jetzt ist mir das klar, alles o.k., hatte den bingbot falsch verstanden.

                              Ich dachte, da muss ich meine ip-adresse von meinem server eingeben.
                              aber damit kann ich prüfen, ob mit der richtigen ip-adresse von bingbot auf meine
                              site zugegriffen wird. muss man also nicht machen,...
                              Gestern, 19:29
                            • Mys87
                              SSL-Zertifikat bzw. DNS Eintrag bei evanzo???
                              Hallo zusammen,

                              da ein SSL-Zertifikat mittlerweile wohl Standard ist würde ich nun auch gerne eins einsetzen. Bin bei evanzo und da habe ich auch schon die Möglichkeit eines kostenloses Zertifikates über let's encrypt gefunden. Nun soll man ein DNS Eintrag erstellen und da komme ich...
                              15.01.2021, 18:13
                            • daniel5959
                              Antwort auf SSL-Zertifikat bzw. DNS Eintrag bei evanzo???
                              Hallo,

                              die .htaccess wird gebraucht, um von den alten HTTP-Adressen zu den sicheren HTTPS-Adressen weiterzuleisten.

                              Seiten, die schon länger im Internet sind, sind auf anderen Webseiten noch mit den alten HTTP-Adressen verlinkt und hierfür braucht es die Weiterleitungen per...
                              Gestern, 19:17
                            • Mys87
                              Antwort auf SSL-Zertifikat bzw. DNS Eintrag bei evanzo???
                              Ja, ich habe es mittlerweile mit Hilfe des Supports (man muss nicht anrufen, man kann auch ein Ticket öffnen und bekommt ganz bequem und schnell eine Antwort per Mail) hinbekommen. Es ist tatsächlich ganz einfach, man muss halt nur wissen wie ;-)

                              1. Im Plesk gibt es den Menüpunkt Let's...
                              Gestern, 18:12
                            • Sempervivum
                              Antwort auf Welchen Editor kommt bei euch zum Einsatz
                              Danke, x-Debug ist konfiguriert, am Anfang funktioniert ja auch immer alles. Ich benutze nicht Apache sondern aus historischen Gründen IIS Express. Ob es wohl daran liegt?
                              Gestern, 17:49
                            • Megabyte
                              Antwort auf Welchen Editor kommt bei euch zum Einsatz
                              Hallo Sempervivum

                              Ich nutze auch das AddOn von Felix Becker. Das Aufhängen hat (denke ich) Konfig-Ursachen. Die ist kniffig und nachdem ich heute das nochmals startete - siehe da: geht auch nicht mehr *muahahahaha*. Werde es nochmals konfigurieren müssen.

                              Wichtig: 'PHP Debug'...
                              Gestern, 17:42
                            • Sempervivum
                              Antwort auf Welchen Editor kommt bei euch zum Einsatz
                              Megabyte Ich benutze ebenfalls VS-Code und bin voll zufrieden. Was bei mir nicht richtig funktioniert ist der Debugger für PHP: Er hängt sich dauernd auf, so dass nichts mehr geht und es ist mir unklar, ob es an der Erweiterung liegt oder an Bedienungsfehlern meinerseits. Wie sind deine Erfahrungen...
                              Gestern, 06:14
                            • Megabyte
                              Antwort auf Wie viele Websietenbesucher habt ihr?
                              Wie versprochen: Wenn ich die crawler aussortiert habe - was bleibt übrig:

                              Habe nun im Monat Dezember mein Besucherskript dahingehend erweitert dass er crawler und bots ausklammert und mittels
                              'session' abfrägt ob sich "Wiederholungstäter" auf meiner Page finden.
                              ...
                              23.01.2021, 23:18
                            • Megabyte
                              Antwort auf Welchen Editor kommt bei euch zum Einsatz
                              Mein Fazit:

                              Nachdem ich fast alle Editoren nun durchhabe bin ich bei vsCode geblieben. Warum?

                              Sehr gutes Highlighning über sehr viele Sprachen, komplett individuell konfigurierbar
                              (und zwar WIRKLICH komplett !!!), fertig integrierte EMMETs und SNIPPETs - auch frei...
                              23.01.2021, 22:55
                            Lädt...
                            X