Inhalt von z.B. von Div Container in Abhängigkeit zum Viewport anzeigen oder auch ausblenden lassen

Shopware 5 Themes & Design
1

Hallo Zusammen,

ich möchte gerne verstehen wie man Inhalte in Abhängigkeit zu den jeweiligen Viewports ein- bzw. ausblenden kann.

Zum Beispiel einen Div Container mit dem Inhalt Text, dieser soll auf dem Desktop, Tablet Landscape und Tablet Portrait an der definierten Stelle angezeigt werden, jedoch nicht wenn die Seite per Mobile Landscape oder Mobile Portrait aufgerufen wird.

Unter Bootstrap hätte man in der class=“hidden-xs” zusätzlich hinterlegt. Wie funktioniert ein solches Vorhaben unter Shopware 5.4.3 ->?

Ich bitte um eure Hilfe, vielen Dank.

 

Mit freundlichen Grüßen,

GAASB

2

https://developers.shopware.com/designers-guide/less/#breakpoint-variables

1 „Gefällt mir“
3

Hallo BestShopPossible,

vielen Dank für deinen Hinweis, damit wusste ich nach was ich suchen muss.

Mit freundlichen Grüßen,

GAASB

 

Falls noch jemand dies suchen sollte, um zu wissen nach was man suchen muss.

.service_bar { 
	display: none;
}
@media screen and(min-width: @phoneLandscapeViewportWidth) {
			.service_bar {
        display: none;
    }
        }
@media screen and(min-width: @tabletViewportWidth) {
            .service_bar {
        display: block;
    }
        }
@media screen and(min-width: @tabletLandscapeViewportWidth) {
            .service_bar {
        display: block;
    }
        }
@media screen and(min-width: @desktopViewportWidth) {
            .service_bar {
        display: block;
    }
        }

 

4

@GAASB schrieb:

Hallo BestShopPossible,

vielen Dank für deinen Hinweis, damit wusste ich nach was ich suchen muss.

Mit freundlichen Grüßen,

GAASB

 

Falls noch jemand dies suchen sollte, um zu wissen nach was man suchen muss.

.service_bar {
display: none;
}
@media screen and(min-width: @phoneLandscapeViewportWidth) {
.service_bar {
display: none;
}
}
@media screen and(min-width: @tabletViewportWidth) {
.service_bar {
display: block;
}
}
@media screen and(min-width: @tabletLandscapeViewportWidth) {
.service_bar {
display: block;
}
}
@media screen and(min-width: @desktopViewportWidth) {
.service_bar {
display: block;
}
}

 

Du brauchst den Code nicht 4 oder 5 mal schreiben.  Das hier genügt:

.service_bar { 
	display: none;
}
@media screen and(min-width: @tabletViewportWidth) {
    .service_bar {
        display: block;
    }
}

Also ab der mindest Größe von Tablet, wird es angezeigt - Mindest bedeutet eben das mindeste und alles darüber.

1 „Gefällt mir“
5

Hallo christiantrade,

vielen Dank für deinen Hinweis!

Mit freundlichen Grüßen,

GAASB