Seitenabstand für mobile Version

HansMeier

Hallo zusammen,

ich will für gewisse Seiten ein Links/rechts Abstand bei 100% Breite einbauen (zwischen 100 und 200px). Jetzt habe ich das Problem, dass der Abstand immer drin ist auch wenn der Bildschirm kleiner ist. Auf dem Handy sieht das natürlich total schlecht aus, mann kann das fast nicht lesen weil es so in der Mitte gequescht ist. Hab schon es schon mit einigen Codes im CSS versucht. Aber klappt nicht.

Kann mit jmd weiterhelfen? Wäre sehr dankbar!

Vielen Dank!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Edi

http://forum.wpde.org/konfiguration/…html#post682017

HansMeier

Hallo Edi,

danke für deine Antwort. Eine Änderung von Schriftgröße und Font brint nichts. Gibt es eine Möglichkeit den Seitenabstand ab einer bestimmten Bildschirmgröße auszublenden?

Monika

ja mit media queries per CSS
mehr als diesen Hinweis kann ich dir so ohne Link zum Geschehen nicht geben

bedenke aber auch:
es gibt Geräte, die bieten Bildschirmauflösung xyz und haben dann noch "Platz" daneben
bei anderen füllt Bildschirmauflösung xyz den ganzen Bildschirm aus...

HansMeier

Hi Monika,

hab den Abstand mal auf folgender Seite eingebaut: http://www.cheapenergy24.de/stromanbieter-wechsel-service/

Desto kleiner der Bildschirm desto schlechter sieht es dann aus.

Wäre super wenn du mir mit media queries per CSS weiterhelfen kannst :)

Danke!

Monika

zb

HTML

@media (min-width: 1024px) {
hier deine Angabe mit den Abstand
}

hilft das weiter?

HansMeier

was muss dann z.B. bei "hier deine Angabe mit Abstand rein"? sorry kenn mich nicht sehr gut mit html aus...

Wäre das ne Option?:
Media (min-width: 1024px) {
margin-left: 0;
margin-right: 0;
}

SirEctor

Anstatt den Abstand (100 oder 200px) generell zu setzen, setzt du ihn nur für Geräte ab einer Mindest-Display-Breite von 1024px, also min-width:1024px.

Also dann eher so:

Code

#content(oder was auch immer){margin-left:0;margin-right:0;} //gilt generell


@media (min-width: 1024px) {
#content(oder was auch immer){margin-left:100px;margin-right:100px;} //gilt ab einer Breite von 1024px
}

Edi

Avada... Lässt sich das nicht bei den Theme-Optionen einstellen?

Irgendwo ist definiert:

CSS

element.style {
   background-color: rgba(255, 255, 255, 0);
   border-bottom: 0 solid #eae9e9;
   border-color: #eae9e9;
   border-top: 0 solid #eae9e9;
   padding-bottom: 20px;
   padding-left: 100px !important;
   padding-right: 100px !important;
   padding-top: 20px;


}

Alles anzeigen

Mit dem !important ist der Rand schwierig wegzubringen.

HansMeier

Ich wollte den Seitenabstand nur für bestimmte Seiten einbauen, also nicht allgemein definieren. Dieser soll dann aber für geringere Breiten nicht angezeigt werden. geht das dann überhaupt so? oder muss ich dann auf den Seiten wo ich keinen Seitenabstand will mit Minus arbeiten?

Edi

Du kannst das CSS selbstverständlich auch nur für bestimmte Seiten definieren. Seiten haben eine Klasse page-id mit einer Nummer (im Tag body), Seiteninhalte eine ID und eine Klasse post mit einer Nummer (im Tag article).

HansMeier

Sorry dass ich nochmal nachfrage, ist es möglich, dass ab einer bestimmten Bildschirmgröße den Seitenabstand generell rausnehme mit

Media (max-width: 1000px) {
{margin-left:0;margin-right:0;} //gilt das dann immer für einen Breite bis 1000px kein Seitenabstand und alles was drüber ist kann ich je Seite definieren bzw. ist allgemein definiert?
}

Ist das so richtig?

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Seitenabstand für mobile Version

Jetzt mitmachen!