Jump to content

Mobile Ansicht im Classic Theme verzerrt 1.7.6.1


Recommended Posts

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

Share this post


Link to post
Share on other sites

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 by Shad86 (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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;
}

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More