Mobile Ansicht im Classic Theme verzerrt 1.7.6.1

[dogsmart]

Hallo Zusammen 

In unserem Shop verwenden wir das Classic Template von PS, lediglich an der Farblichen Darstellung wurden einige Anpassungen vorgenommen. Soweit alles OK. Jedoch in der mobilen Ansicht, zumindest bei mir unter Android, ist alles zu weit oben, auch der Image-Slider ist viel grösser als der Inhalt. Am PC ist alles ok. Weis jemand wo ich hier eingreifen muss? 

 

Danke für Eure Hilfe im voraus

[Shad86]

Das kannst du in der theme.css anpassen.

Da ist ein Abschnitt:

@media (max-width:767px) {
 .carousel .carousel-item .caption {
  bottom:calc(50% - 1.5rem)
 }
 .carousel .carousel-item .caption .display-1 {
  font-size:1.5rem
 }
 .carousel .carousel-control .icon-next i,
 .carousel .carousel-control .icon-prev i {
  font-size:2rem
 }
}

Der sorgt dafür das der Slider unter 767px Bildschirmbreite etwas bestimmtes macht. Da kannst du z.B. die Höhe neu definieren.

z.B. fügst du da

.carousel {
    height: 205px;
    margin-top: 50px;
}

und in das
 

 .carousel .carousel-item .caption .display-1 {
  font-size:1.5rem;
  margin-top: -150px;
 }

fügst du margin-top: -150px; ein.

 

Edit:

Befass dich mal mit der Untersuchen Funktion deines Browsers. Viele Browser haben mit einem Rechtsklick die Option "Element Untersuchen" oder ähnlich. Je nachdem welches Element du damit wählst, zeigt er dir den Quellcode und alle CSS Befehle an die darauf zugreifen. Da kannst du dann in Ruhe testen welcher Code den gewünschten Effekt erzielt, und kannst es dann in die theme.css oder custom.css übernehmen.

Edited January 27, 2020 by Shad86 (see edit history)

[JBW]

In 1.7 solltest du keine Anpassungen direkt in der themes.css machen, diese würden bei einem Update wieder überschrieben. Für den Zweck gibt es die Datei /templates/classic/assets/css/custom.css in die du deine CSS Anweisungen (evtl. mit !important) einfügen kannst.

Ich würde aber vorher etwas die Ursache erforschen denn das normale classic Template funktionmiert einwandfrei auf mobiler Ansicht - auch der Slider

[dogsmart]

Cool Danke für die Hilfe. Ich arbeite mit custom.css für alle änderungen. Die Untersuchen Funktion von Chrome kenne ich, jedoch kann ich die auf dem Handy nicht nutzen. Hier noch ein Auszug aus meiner custom.css mit den Anpassungen, vielleicht hilft es ja auch wem anderen.

 

/* ************************************************************************************************
                                   Mobile View Slider
************************************************************************************************ */
@media (max-width:767px) {
 .carousel .carousel-item .caption {
  bottom:calc(50% - 1.5rem)
 }
.carousel {
    height: 135px;
    margin-top: 50px;
}
.carousel .carousel-item .caption .display-1 {
  font-size:1.5rem;
  margin-top: -200px;
 }
 .carousel .carousel-control .icon-next i,
 .carousel .carousel-control .icon-prev i {
  font-size:2rem
 }
}
/* ************************************************************************************************
                                    Basic Design
************************************************************************************************ */
#wrapper {
    background: #ffe700;
    box-shadow: inset 0 0px 0px 0 rgba(0,0,0,.11);
    padding-top: 10px;
}
#header {
    background: #ffe700;
}
#footer {
    background: #fdf39b; border-top: 3px solid #ffffff;
}
#carousel .carousel-inner{
    height: 450px;
}
#custom-text {
    background: #fdf39b;
}
#header .header-top {
    padding-bottom: 0px;
}
#header .header-nav {
    border-bottom: 2px solid #f1f1f1;
    max-height: 50px;
    margin-bottom: 0px;
}
#top-menu {
    margin-top: 50px;
}
#header .logo {
    width: 1110px;
    max-width:  1110px;
    height:  150px;
}
/* ************************************************************************************************
                                    Categories Styles
************************************************************************************************ */
#main .block-category{
    min-height: 100px;
}
/* ************************************************************************************************
                                    Sub Categories Styles
************************************************************************************************ */
#subcategories {
    border-top: 1px solid #d6d4d4;
    padding: 15px 0 0px 0;
}
 
#subcategories p.subcategory-heading {
    font-weight: bold;
    color: #333;
    margin: 0 0 15px 0;
}
 
#subcategories ul {
    margin: 0 0 0 -20px;
}
 
#subcategories ul li {
    float: left;
    width: 240px;
    margin: 0 0 13px 33px;
    text-align: center;
    height: 270px;
}
 
#subcategories ul li .subcategory-image {
    padding: 0 0 0px 0;
}
 
#subcategories ul li .subcategory-image a {
    display: block;
    padding: 0px;
    border: 1px solid #d6d4d4;
}
 
#subcategories ul li .subcategory-image a img {
    max-width: 100%;
    vertical-align: top;
}
 
#subcategories ul li .subcategory-name {
    font: 600 18px/22px "Open Sans", sans-serif;
    color: #555454;
    text-transform: uppercase;
}
 
#subcategories ul li .subcategory-name:hover {
    color: #515151;
}
 
#subcategories ul li .cat_desc {
    display: none;
}
 
#subcategories ul li:hover .subcategory-image a {
    border: 2px solid #333;
    padding: 0px;
}

 

[JBW]

1 hour ago, dogsmart said:

, jedoch kann ich die auf dem Handy nicht nutzen

Du kannst die Mobil Ansicht bzw. Auflösung im Browser auf dem Desktop simulieren

[Shad86]

vor 10 Stunden schrieb JBW:

Du kannst die Mobil Ansicht bzw. Auflösung im Browser auf dem Desktop simulieren

Genau. Ich nutze kein Chrome aber bei Firefox ist oben rechts auf den 3 Strichen, der Menüpunkt "Web-Entwickler" und dort kannst du "Bildschirmgrößen testen" anklicken. Bin mir gerade nicht sicher ob das per Plugin nachinstalliert werden musste oder ob das immer drin ist.

Aber da kannst du den Bildschirm so klein ziehen wie du möchtest und siehst ab welcher Bildschirmbreite, was passiert. Und kannst dann auch die Untersuchen Funktion in vollem Umfang nutzen.