Hallo, ich habe mir in den Header ein Button eingebunden, jetzt kriege ich es nicht hin das dieser nur bei Desktop angezeigt wird und bei Tablet und Phone ausgeblendet wird. Folgende Befehle verwende ich, sieht einer den Fehler? @media screen and (min-width: @desktopViewportWidth) { .header\_teaser { position: absolute; left: 51rem; top: 10px; } .header\_teaser .column { float: left; width: 190px; font-size: 13px; color: #333; border-right: 1px solid #dfdfdf; padding: 0 15px; } .column.first\_column .a { left: 51rem !important; position: absolute; } .column.first\_column img { left: 51rem !important; position: absolute !important; } // Tablet styling for the global shop header @media screen and (min-width: @tabletViewportWidth) { .header\_teaser { display: none !important; } .header\_teaser .column { display: none !important; } .column.first\_column .a { display: none !important; } .column.first\_column img { display: none! important; } }
Also ich bin auch kein Profi, aber versuch mal folgendes: Füge mal in den Teil: @media screen and (min-width: @desktopViewportWidth) { .header\_teaser { position: absolute; left: 51rem; top: 10px; } .header\_teaser .column { float: left; width: 190px; font-size: 13px; color: #333; border-right: 1px solid #dfdfdf; padding: 0 15px; } .column.first\_column .a { left: 51rem !important; position: absolute; } .column.first\_column img { left: 51rem !important; position: absolute !important; } display:block; bei jeder klasse ein. und lass in dem teil: // Tablet styling for the global shop header @media screen and (min-width: @tabletViewportWidth) { .header\_teaser { display: none !important; } .header\_teaser .column { display: none !important; } .column.first\_column .a { display: none !important; } .column.first\_column img { display: none! important; } } mal @media screen and (min-width: @tabletViewportWidth) { ... } weg. Dann müsste es eigentlich nur auf dem Desktop angezeigt werden.
Jetzt wird der Button gar nicht mehr angezeigt, mit dem Code von dir… @media screen and (min-width: @desktopViewportWidth) { .header\_teaser { position: absolute; left: 51rem; top: 10px; } .header\_teaser .column { float: left; width: 190px; font-size: 13px; color: #333; border-right: 1px solid #dfdfdf; padding: 0 15px; } .column.first\_column .a { left: 51rem !important; position: absolute; } .column.first\_column img { left: 51rem !important; position: absolute !important; } } .header\_teaser { display: none !important; } .header\_teaser .column { display: none !important; } .column.first\_column .a { display: none !important; } .column.first\_column img { display: none! important; }
Du hast ja auch nur den zweiten Teil geändert. Wenn du meine vorherige Antwort nochmal durchliest, wirst du sehen, dass du den ersten Teil nicht geändert hast.
wenn du das display:block; meinst, damit habe ich es auch versucht, hat leider nicht geklappt. so ist jetzt der aktuelle code: @media screen and (max-width: @desktopViewportWidth) { .header\_teaser { position: absolute; left: 51rem; top: 10px; display:block; } .header\_teaser .column { float: left; width: 190px; font-size: 13px; color: #333; border-right: 1px solid #dfdfdf; padding: 0 15px; display:block; } .column.first\_column .a { left: 51rem !important; position: absolute; display:block; } .column.first\_column img { left: 51rem !important; position: absolute; display:block } } .header\_teaser { display: none; } .header\_teaser .column { display: none; } .column.first\_column .a { display: none; } .column.first\_column img { display: none; }
Jetzt hast du allerdings beim viewport @media screen and (max-width: @desktopViewportWidth) Versuchs mal mit min-width, das hattest du davor ja auch da stehen. Ansonsten bin ich wie gesagt auch kein Profi, aber meiner Meinung nach müsste es so klappen. Vielleicht meldet sich da noch jemand anders zu Wort.
hab es auch auf min gestellt gehabt, so wie jetzt wieder, es geht trotzdem nicht.
Cache gelöscht und Theme neu kompiliert?
Das mache ich schon ganz automatisch bei jeder Änderung. Habe leider immer noch keine Lösung gefunden 
Zur Live Ansicht geht es hier, falls es was bringt: wewewe punkt moebelspotkids punkt deeh
Sie haben nur den zweiten Teil geändert. Wenn Sie meine bisherige Antwort noch einmal gelesen haben, werden Sie feststellen, dass Sie das ursprüngliche Segment nicht geändert haben.
HTML Tutorial
HTML HOME
HTML Introduction
HTML Editors
HTML Basic
HTML Elements
HTML Attributes
HTML Headings
HTML Paragraphs
HTML Styles
HTML Formatting
HTML Quotations
HTML Computercode
HTML Comments
HTML Colors
HTML CSS
HTML Links
HTML Images
HTML Tables
HTML Lists
HTML Blocks
HTML Classes
HTML Layout
HTML Responsive
HTML Iframes
HTML JavaScript
HTML Head
HTML Entities
HTML Symbols
HTML Charset
HTML URL Encode
HTML XHTML
HTML Forms
HTML Forms
HTML Form Elements
HTML Input Types
HTML Input Attributes
HTML5
HTML5 Intro
HTML5 Support
HTML5 Elements
HTML5 Semantics
HTML5 Migration
HTML5 Style Guide
HTML Graphics
HTML Media
HTML Media
HTML Video
HTML Audio
HTML Plug-ins
HTML YouTube
HTML APIs
HTML Geolocation
HTML Drag/Drop
HTML Local Storage
HTML App Cache
HTML Web Workers
HTML SSE