Webflow anderer Content für mobile?

2 Antworten

Sie können einige Inhalte mithilfe von Medienabfragen ("media queries") ausblenden oder anzeigen. Mit der Medienabfrage können Sie Stile festlegen, die nur für Bildschirme mit einer bestimmten Breite funktionieren.

  1. https://www.seobility.net/de/wiki/Media_Queries
  2. https://www.mediaevent.de/css/media-query.html

Sie können beispielsweise eine Stilklasse ".on-mobile-only" erstellen und diese auf die Teile des Inhalts setzen, die nur auf Bildschirmen sichtbar sein sollen, deren Breite weniger als 600 Pixel beträgt.

CSS

@media (min-width: 600px) {
	.on-mobile-only {
		display: none !important;
	}
}

HTML

<p>Dieser Text ist immer sichtbar.</p>

<p class="on-mobile-only">Dieser Text ist nur sichtbar, wenn die Bildschirmbreite weniger als 600 Pixel beträgt.</p>

<img src="image-1.jpg" alt="Dieses Bild ist immer sichtbar">

<img src="image-2.jpg" class="on-mobile-only" alt="Dieses Bild ist nur sichtbar, wenn die Bildschirmbreite weniger als 600 Pixel beträgt">
Woher ich das weiß: Berufserfahrung
Ich würde gerne einige Texte meiner Website kürzen, aber NUR für die Smartphone Version. Ist das möglich?

Das ist ganz einfach möglich, aber fürs SEO sehr, sehr schädlich.

<!doctype html>
<title>mobile text</title>
<style>
.mobileOnly {
    display:none
}

@media screen and (max-width:400px) {
    .desktopOnly {
       display:none
   }
   .mobileOnly {
       display:block
   }
}
</style>
<section>Dieser Text wird auf allen Geräten angezeigt und von Google indexiert</section>
<section class="desktopOnly">Dieser Text wird nur ab 400px Breite angezeigt und von Google ignoriert</section>
<section class="mobileOnly">Dieser Text wird nur bis 400px Breite angezeigt und von Google indexiert</section>

Alex

Was möchtest Du wissen?