# Darstellung Mobil und Desktop Bereiche ausblenden
**URL:** https://forum.shopware.com/t/darstellung-mobil-und-desktop-bereiche-ausblenden/30865
**Category:** Themes & Design
**Created:** [25. September 2015 um 12:21 UTC](https://forum.shopware.com/t/darstellung-mobil-und-desktop-bereiche-ausblenden/30865 "2015-09-25T12:21:07Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@konsi](https://forum.shopware.com/u/konsi)
#### Post date: [25. September 2015 um 12:21 UTC](https://forum.shopware.com/t/darstellung-mobil-und-desktop-bereiche-ausblenden/30865/1 "2015-09-25T12:21:07Z")
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; } } `
---
### Author:  [@SebastianS](https://forum.shopware.com/u/SebastianS)
#### Post date: [25. September 2015 um 17:39 UTC](https://forum.shopware.com/t/darstellung-mobil-und-desktop-bereiche-ausblenden/30865/2 "2015-09-25T17:39:35Z")
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.
---
### Author:  [@konsi](https://forum.shopware.com/u/konsi)
#### Post date: [29. September 2015 um 12:18 UTC](https://forum.shopware.com/t/darstellung-mobil-und-desktop-bereiche-ausblenden/30865/3 "2015-09-29T12:18:16Z")
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; } `
---
### Author:  [@SebastianS](https://forum.shopware.com/u/SebastianS)
#### Post date: [29. September 2015 um 12:47 UTC](https://forum.shopware.com/t/darstellung-mobil-und-desktop-bereiche-ausblenden/30865/4 "2015-09-29T12:47:09Z")
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.
---
### Author:  [@konsi](https://forum.shopware.com/u/konsi)
#### Post date: [30. September 2015 um 10:24 UTC](https://forum.shopware.com/t/darstellung-mobil-und-desktop-bereiche-ausblenden/30865/5 "2015-09-30T10:24:09Z")
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; } `
---
### Author:  [@SebastianS](https://forum.shopware.com/u/SebastianS)
#### Post date: [30. September 2015 um 12:11 UTC](https://forum.shopware.com/t/darstellung-mobil-und-desktop-bereiche-ausblenden/30865/6 "2015-09-30T12:11:57Z")
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.
---
### Author:  [@konsi](https://forum.shopware.com/u/konsi)
#### Post date: [30. September 2015 um 17:33 UTC](https://forum.shopware.com/t/darstellung-mobil-und-desktop-bereiche-ausblenden/30865/7 "2015-09-30T17:33:27Z")
hab es auch auf min gestellt gehabt, so wie jetzt wieder, es geht trotzdem nicht.
---
### Author:  [@Tanny](https://forum.shopware.com/u/Tanny)
#### Post date: [30. September 2015 um 17:34 UTC](https://forum.shopware.com/t/darstellung-mobil-und-desktop-bereiche-ausblenden/30865/8 "2015-09-30T17:34:28Z")
Cache gelöscht und Theme neu kompiliert?
---
### Author:  [@konsi](https://forum.shopware.com/u/konsi)
#### Post date: [5. Oktober 2015 um 18:03 UTC](https://forum.shopware.com/t/darstellung-mobil-und-desktop-bereiche-ausblenden/30865/9 "2015-10-05T18:03:39Z")
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
---
### Author:  [@augusta12](https://forum.shopware.com/u/augusta12)
#### Post date: [16. März 2019 um 03:00 UTC](https://forum.shopware.com/t/darstellung-mobil-und-desktop-bereiche-ausblenden/30865/10 "2019-03-16T03:00:11Z")
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](https://www.welookups.com/html/default.html)
[HTML Introduction](https://www.welookups.com/html/html_intro.html)
[HTML Editors](https://www.welookups.com/html/html_editors.html)
[HTML Basic](https://www.welookups.com/html/html_basic.html)
[HTML Elements](https://www.welookups.com/html/html_elements.html)
[HTML Attributes](https://www.welookups.com/html/html_attributes.html)
[HTML Headings](https://www.welookups.com/html/html_headings.html)
[HTML Paragraphs](https://www.welookups.com/html/html_paragraphs.html)
[HTML Styles](https://www.welookups.com/html/html_styles.html)
[HTML Formatting](https://www.welookups.com/html/html_formatting.html)
[HTML Quotations](https://www.welookups.com/html/html_quotation_elements.html)
[HTML Computercode](https://www.welookups.com/html/html_computercode_elements.html)
[HTML Comments](https://www.welookups.com/html/html_comments.html)
[HTML Colors](https://www.welookups.com/html/html_colors.html)
[HTML CSS](https://www.welookups.com/html/html_css.html)
[HTML Links](https://www.welookups.com/html/html_links.html)
[HTML Images](https://www.welookups.com/html/html_images.html)
[HTML Tables](https://www.welookups.com/html/html_tables.html)
[HTML Lists](https://www.welookups.com/html/html_lists.html)
[HTML Blocks](https://www.welookups.com/html/html_blocks.html)
[HTML Classes](https://www.welookups.com/html/html_classes.html)
[HTML Layout](https://www.welookups.com/html/html_layout.html)
[HTML Responsive](https://www.welookups.com/html/html_responsive.html)
[HTML Iframes](https://www.welookups.com/html/html_iframe.html)
[HTML JavaScript](https://www.welookups.com/html/html_scripts.html)
[HTML Head](https://www.welookups.com/html/html_head.html)
[HTML Entities](https://www.welookups.com/html/html_entities.html)
[HTML Symbols](https://www.welookups.com/html/html_symbols.html)
[HTML Charset](https://www.welookups.com/html/html_charset.html)
[HTML URL Encode](https://www.welookups.com/html/html_urlencode.html)
[HTML XHTML](https://www.welookups.com/html/html_xhtml.html)
## HTML Forms
[HTML Forms](https://www.welookups.com/html/html_forms.html)
[HTML Form Elements](https://www.welookups.com/html/html_form_elements.html)
[HTML Input Types](https://www.welookups.com/html/html_form_input_types.html)
[HTML Input Attributes](https://www.welookups.com/html/html_form_attributes.html)
## HTML5
[HTML5 Intro](https://www.welookups.com/html/html5_intro.html)
[HTML5 Support](https://www.welookups.com/html/html5_browsers.html)
[HTML5 Elements](https://www.welookups.com/html/html5_new_elements.html)
[HTML5 Semantics](https://www.welookups.com/html/html5_semantic_elements.html)
[HTML5 Migration](https://www.welookups.com/html/html5_migration.html)
[HTML5 Style Guide](https://www.welookups.com/html/html5_syntax.html)
## HTML Graphics
[HTML Canvas](https://www.welookups.com/html/html5_canvas.html)
[HTML SVG](https://www.welookups.com/html/html5_svg.html)
## HTML Media
[HTML Media](https://www.welookups.com/html/html_media.html)
[HTML Video](https://www.welookups.com/html/html5_video.html)
[HTML Audio](https://www.welookups.com/html/html5_audio.html)
[HTML Plug-ins](https://www.welookups.com/html/html_object.html)
[HTML YouTube](https://www.welookups.com/html/html_youtube.html)
## HTML APIs
[HTML Geolocation](https://www.welookups.com/html/html5_geolocation.html)
[HTML Drag/Drop](https://www.welookups.com/html/html5_draganddrop.html)
[HTML Local Storage](https://www.welookups.com/html/html5_webstorage.html)
[HTML App Cache](https://www.welookups.com/html/html5_app_cache.html)
[HTML Web Workers](https://www.welookups.com/html/html5_webworkers.html)
[HTML SSE](https://www.welookups.com/html/html5_serversentevents.html)