# Breakpoint probleme bei Smartphone

**URL:** <https://forum.shopware.com/t/breakpoint-probleme-bei-smartphone/106755>\
**Category:** Shopware 6 (German)\
**Created:** [17. März 2025 um 16:10 UTC](https://forum.shopware.com/t/breakpoint-probleme-bei-smartphone/106755 "2025-03-17T16:10:26Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![olasagarre](https://avatars.discourse-cdn.com/v4/letter/o/91b2a8/32.png) [@olasagarre](https://forum.shopware.com/u/olasagarre)\
**Post date:** [17. März 2025 um 16:10 UTC](https://forum.shopware.com/t/breakpoint-probleme-bei-smartphone/106755/1 "2025-03-17T16:10:26Z")

</div>

Hallo, teste meine neue Thema in Smartphone, ich bekomme Probleme zwischen 600px und 750px.

Ich habe der Datei **\_variables.scss** in **storefront/src/scss** gelegt, mit dem Code für Breakpoint von Bootstrap,

```auto
$grid-breakpoints: (
  xs: 400px,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

```

In meine Datei für Breakpoint habe,

```auto
@include media-breakpoint-only(sm) { 

.col-md-4 {
                flex-basis: 100%;
        } 

        .footer-main .col-md-4 {width: 25%;}
                   ... 
}
@include media-breakpoint-only(md) { 

   .col-md-4 {
                flex-basis: 100%;
        } 

        .footer-main .col-md-4 {width: 25%;}
                          ... 
}
@include media-breakpoint-only(lg) { 

.col-md-4 {
                flex-basis: 100%;
        } 

        .footer-main .col-md-4 {width: 25%;}
              ... 
}
@include media-breakpoint-only(xl) {

   .col-md-4 {
                flex-basis: 100%;
        } 

        .footer-main .col-md-4 {width: 25%;}

      ...

 }
@include media-breakpoint-only(xxl) {

   .col-md-4 {
                flex-basis: 100%;
        } 

        .footer-main .col-md-4 {width: 25%;}
                      ... 

}

```

Wenn verändert `@include media-breakpoint-only(` von `@include media-breakpoint-up(`  
wechsel alle mein footer Layout, die [hier](https://forum.shopware.com/t/neu-div-in-footer-erstellen/106677) bekommt habe..

---

<div class="post-metadata">

**Author:** ![olasagarre](https://avatars.discourse-cdn.com/v4/letter/o/91b2a8/32.png) [@olasagarre](https://forum.shopware.com/u/olasagarre)\
**Post date:** [17. März 2025 um 17:37 UTC](https://forum.shopware.com/t/breakpoint-probleme-bei-smartphone/106755/2 "2025-03-17T17:37:56Z")

</div>

Ich habe eine Lösung für diesen Probleme… 😀

Ich habe eine neue Breakpoint zwischen

```auto
@include media-breakpoint-only(sm) { }

```

und

```auto
@include media-breakpoint-only(md) {}

```

mit diesen, lösen die Probleme…

```auto
@media (min-width: 36em) and (max-width: 47em) { }

       
        

```

---

<div class="post-metadata">

**Author:** ![system](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/2/9/29c7587ba660f00e4995d1743162782e5d6d8653.svg) [@system](https://forum.shopware.com/u/system)\
**Post date:** [16. April 2025 um 17:38 UTC](https://forum.shopware.com/t/breakpoint-probleme-bei-smartphone/106755/3 "2025-04-16T17:38:35Z")

</div>

Dieses Thema wurde automatisch 30 Tage nach der letzten Antwort geschlossen. Es sind keine neuen Antworten mehr erlaubt.