Breakpoint probleme bei Smartphone

Shopware 6 (German)
1

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,

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

In meine Datei für Breakpoint habe,

@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 bekommt habe..

2

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

Ich habe eine neue Breakpoint zwischen

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

und

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

mit diesen, lösen die Probleme…

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