Bilder Navigation für Smartphones deaktivieren

mattez · 25. Oktober 2015

Hallo zusammen

Ich bin schon ganz zufrieden mit meinen Ergebnissen in Wordpress, aber mich stört noch eine Kleinigkeit.
Und zwar nutze ich einen Slider der jeweils links und rechts einen Pfeil hat, mit dem ich das ganze noch von Hand steuern kann.
Öffne ich die Seite über mein Mobilphone, stören mich die Pfeile, da sie zu groß sind. Gibt es eine Möglichkeit die Navigation für den Mobilphone Modus zu deaktivieren?

LG Mattez

maxe · 25. Oktober 2015

ja, kann man i.d.R. über CSS media queries für die entsprechende Auflösung auf display:none setzen.

Kurt · 25. Oktober 2015

display:none lässt aber nur die Bilder nicht erscheinen. Wenn du dir Gedanken über Datenvolumen machst, solltest du eine andere Lösung finden. Manche Browser laden trotzdem Bilder obwohl sie nicht angezeigt werden sollen. Wenn die Bilder per Background-Image gesetzt wurden, sollte das kein Problem sein. Bei deinem Slider wird das aber denke ich, nicht so sein. Habt ihr da eine Idee? Ich möchte auf meine mobilen Seite meinen kompletten Slider nicht übermitteln. Ist den User-Agent auswerten State of the Art? http://mobiledetect.net/ Denkbar wäre noch per Javascript den img-tag zu füllen bzw leer zu lassen, aber dann hat man einen HTTP REquest umsonst gemacht.

mattez · 25. Oktober 2015

Danke für eure Antworten. Ich bin im übrigen nur ein Amateur, der sich nicht sonderlich gut mit CSS usw. auskennt. In der "Stylesheet" Datei ist festgelegt, wie sich das Design bei verschiedenen Auflösungen verhalten soll. Unter dem Punkt "DESKTOPS MEDIUM" ist es doch bestimmt möglich einen Code einzufügen, der die Navigation deaktiviert oder täusche ich mich?
Vielen Dank im Voraus für eure Hilfe

/* WordPress Core -------------------------------------------------------------- */

.aligncenter, .alignnone, .alignright, .alignleft {
display: block; margin: 1.6em auto; clear: both;
}
.wp-caption {
color:#555;
}
.wp-caption img {
border: 0 none; height: auto; margin: 0; padding: 0;
}
.wp-caption p.wp-caption-text {
font-size: 14px; margin: 0; padding: .6em .1em 0; text-align: left; letter-spacing: 0px; color: #999;
}
.wp-caption.aligncenter,
.wp-caption.aligncenter .wp-caption-text {
text-align: center;
}

/* TABLETS */
@media screen and (min-width: 768px) {
.alignnone {
margin: 3em 0;
}
.aligncenter {
margin: 3em auto;
}
.alignright {
float:right; margin: .4em 0 1em 2em;
}
.alignleft {
float: left; margin: .4em 2em 1em 0;
}
.alignright .wp-caption-text,
.alignleft p.wp-caption-text {
max-width: 230px;
}
}

/* DESKTOPS MEDIUM */
@media screen and (min-width: 1200px) {
.content-area:not(.with-sidebar) .alignright, .content-area:not(.with-sidebar) .wp-caption.alignright {
margin-right: -140px; margin-left: 2em;
}
.content-area:not(.with-sidebar) .alignleft, .content-area:not(.with-sidebar) .wp-caption.alignleft {
margin-left: -140px; margin-right: 2em;
}
}
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

maxe · 25. Oktober 2015

du solltest eher mal einen Link zum Geschehen posten.

@Kurt, es ging hier lediglich um 2 Pfeile, nicht um hochauflösende Bilder die großes Datenvolumen erzeugen.

WPDE.org

Bilder Navigation für Smartphones deaktivieren

mattez New Member

maxe Well-Known Member
Ehrenmitglied

Kurt Well-Known Member

mattez New Member

maxe Well-Known Member
Ehrenmitglied

Nützliche Suchen

Bilder Navigation für Smartphones deaktivieren

mattez New Member

maxe Well-Known Member Ehrenmitglied

Kurt Well-Known Member

mattez New Member

maxe Well-Known Member Ehrenmitglied

maxe Well-Known Member
Ehrenmitglied

maxe Well-Known Member
Ehrenmitglied