Block in der Sidebar für Handy/ Tablet ausschalten

Hallo

Ich habe ein Bewertungslogo eingebaut. Leider überdeckt es bei Handy die Seite.

Ich würde dieses Bewertungslogo gerne nur auf der Desktop-Ansicht anzeigen. Wie kann ich das realisieren?

@kohli24 schrieb:

Hallo

Ich habe ein Bewertungslogo eingebaut. Leider überdeckt es bei Handy die Seite.

Ich würde dieses Bewertungslogo gerne nur auf der Desktop-Ansicht anzeigen. Wie kann ich das realisieren?

Hallo,

mit LESS bzw. CSS und der Zuhilfenahme der entsprechenden Breakpoints, siehe: Getting started with LESS und Example - Custom detail page .

Beste Grüße

Sebastian

1 „Gefällt mir“

Vielen Dank schonmal… das Thema ist an sich schon ziemlich kompliziert. Ich habe mich mal ran gewagt und folgendes erstellt.

 

sidebar.tpl

{block name='frontend_ausgezeichnet'}




Ausgezeichnet.org




{/block}

 

Wie kann ich nun sagen, dass .frontend_ausgezeichnet  nicht angezeigt wird?

sidebar.less

.frontend_ausgezeichnet {
    .unitize-padding(10, 0);
}

@media screen and(min-width: @desktopViewportWidth) {

    .frontend_ausgezeichnet {
        .unitize-padding(20, 0);
    }

}

 

display:none;

1 „Gefällt mir“

Kann ich bei

   @media screen and(min-width: @desktopViewportWidth) {

auch mit max-width arbeiten?

Du machst es für alle Breakpoints auf display:none; und bei Desktop display:block; oder inline oder was Du brauchst

1 „Gefällt mir“

Klasse! So langsam verstehe ich das Prinzip. :slight_smile: Danke Euch!

Gibt es auch eine Breakpoint variable für phone (hochkant)?

 

@kohli24 schrieb:

Klasse! So langsam verstehe ich das Prinzip. :slight_smile: Danke Euch!

Gibt es auch eine Breakpoint variable für phone (hochkant)?

 

Hallo,

siehe der Link: Getting started with LESS (phoneLandscapeViewportWidth = Handy Querformat, kann man auch als max-width nehmen, um alles darunter anzusteuern). Und display: none; benutzt man fürs ausblenden, siehe: http://www.w3schools.com/cssref/pr\_class\_display.asp .

Beste Grüße

Sebastian

1 „Gefällt mir“

Jetzt ist es perfekt. Vielen Dank nochmal! :slight_smile: