Social Media Block (Smartphone-Ansicht) California Theme

Deutsch Diskussion Technische Fragen & Antworten
,

Topic summary

Ein Nutzer meldet ein Darstellungsproblem im California Theme: Die Social-Media-Icons im Footer werden auf Smartphones zusammengequetscht.

Lösungsansatz:

  • Zunächst wurde CSS-Code für die Schriftgröße im Header-Menü vorgeschlagen
  • Nach Klarstellung, dass das Problem speziell den Footer-Bereich betrifft, wurde angepasster CSS-Code bereitgestellt:
@media (max-width: 960px){
  #shopify-section-footer .footer .col{
    width:100% !important;
    font-size:20px !important;
  }
  #shopify-section-footer .footer .content .row .cols .col p{
    font-size:16px !important;
  }
}

Status: Problem gelöst. Der Nutzer bestätigte, dass der Code funktioniert hat.

Hinweis: Das Problem trat in allen mobilen Browsern auf, nicht nur browserspezifisch.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Hallo Community,

bei der Smartphone-Ansicht wird der ganze Socialmedia Block in der Footer Zeile zusammen gequetscht.

An was liegt das und wie kann man das beheben.

Bildschirm­foto 2023-02-20 um 00.48.47.png
Bildschirm­foto 2023-02-20 um 00.48.47.png352×455 12.6 KB

Herzliche Grüße Chris

2

Teilen Sie mir Ihre Shop-URL und Ihr Passwort mit, wenn Sie eine haben.

3

Hey @Chris1337

Du kannst auch einen befristeten Vorschaulinkzu einem Beispiel hier verlinken, so dass wir das schneller auf dem Handy analysieren können :wink:

Ggf. ist das problem Browser-bedingt auf Mobile und somit empfehle ich auch andere browser wie Google Chrome zu testen. Ich würde vom Samsung Browser ganz weg bleiben und Safari ist uns auch bekannt, dass es Probleme beim Rendering verursacht.

4

Hallo Gabe,

hier ist der Link zum shop https://leetempire.com/

Leider ist das Problem auf allen Mobile Browsern

LG

5

Ich habe Ihren Shop überprüft und Sie können die Schriftgröße auf Ihrem Handy entsprechend reduzieren.

@media (max-width: 960px){
 /* In Bezug auf das Menü Inhalt Reduktion Code ist. */
.section-header .header .side-nav-section{
   font-size:20px !important;
}
/* Im Hinblick auf die Verringerung der Medien Schriftgröße. */
.section-header .header .side-nav-section .connect{
font-size:14px !important;
}
}

Versuchen Sie diese Codes unter der Datei california.css

6

Danke für die Antwort,

jedoch betrifft der von Ihnen gesendete Code die Sidemenü Ansicht (dort werden die Social Media Kanäle korrekt angezeigt).

Das Problem ist jedoch im Footer, beim Social Media Block.

LG

7 
@media (max-width: 960px){

#shopify-section-footer .footer .col{
   width:100% !important;
   font-size:20px !important;
}

#shopify-section-footer .footer .content .row.cols .col p{
font-size:16px !important;
}
}
1 Like
8

vielen Dank!!!

9

Wenn meine Antwort Ihr Problem löst, können Sie meine Antwort als gelöst markieren!

Ich bin froh, dass ich Ihnen bei Ihrem Problem helfen konnte!

1 Like