Zmniejszenie nagłówków wordpress i wtyczka messenger

pytanie zadane 23 grudnia 2019 w HTML i CSS przez YakumoPL Obywatel (1,970 p.)

Cześć! Chciałbym zmiejszyć szerokość oraz wielkość czcionki na stronie mobilnej mojego sklepu. Próbowałem z @media screen and (min-width: 800px) {} ale coś nie działa ;/ Chodzi mi dokładnie o ten pierwszy slider i teksty w nim zawarte. Strona to https://bit.ly/396bmeF

Przy okazji zapytam o wtyczkę messengera https://wordpress.org/plugins/facebook-messenger-customer-chat/ Chciałbym wyłączyć jej rozwinięcie, ale tylko na telefonach, ponieważ zajmuje wtedy strasznie dużo miejsca i ciężko ją wyłączyć. Kod we wtyczce wygląda następująco

<div id='fb-root'></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    js = d.createElement(s); js.id = id;
    js.src = 'https://connect.facebook.net/pl_PL/sdk/xfbml.customerchat.js#xfbml=1&version=v2.12&autoLogAppEvents=1';
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>
  <div class='fb-customerchat'
    attribution="wordpress"
    page_id='111653210282328'
    logged_in_greeting='Dzień dobry. W czym możemy pomóc?'
    logged_out_greeting='Dzień dobry. W czym możemy pomóc?'
  >
</div>

Życzę udanych świąt :)

1 odpowiedź

odpowiedź 23 grudnia 2019 przez lapa19904 Stary wyjadacz (11,560 p.)
wybrane 23 grudnia 2019 przez YakumoPL

Najlepsza

(min-width: 800px) {} to style dla ekranów o szerokości powyżej 800px. Jaka wersja mobilna? :o

komentarz 23 grudnia 2019 przez YakumoPL Obywatel (1,970 p.)

Chodzi mi po prostu o wyświetlanie na telefonach, bo strasznie brzydko to wygląda :D

komentarz 23 grudnia 2019 przez lapa19904 Stary wyjadacz (11,560 p.)

No to robisz to źle, ekran telefonu ma średnio 320px szerokości.

Ty zapisujesz (min-width: 800px) {} czy ekrany szersze niż 800px.

Zmień na (max-width: 800px) {} i napisz czy zadziałało właściwie.

komentarz 23 grudnia 2019 przez YakumoPL Obywatel (1,970 p.)

Wielkie dzięki :)

komentarz 23 grudnia 2019 przez YakumoPL Obywatel (1,970 p.)

Wpisałem coś takiego


@media screen and (max-width: 800px) {
  .hs-title-size-1{padding-right:20%; padding-left: 20%; }
	
	.hs-title-size-4 font-alt mb-30 {font-size: 25px; margin-top: 20vh;}
	
}

Niestety ten największy nagłówek nawet się nie ruszył z miejsca :D

komentarz 23 grudnia 2019 przez lapa19904 Stary wyjadacz (11,560 p.)

Nie wiem jak zbudowany jest template który próbujesz edytować ale zapis

.hs-title-size-4 font-alt mb-30

jest o tyle ciekawy że nie wiadomo czy font-alt i mb-30 to tagi html, klasy czy id.

Po za tym nie sądzę też aby mb-30 było dzieckiem font-alt który jest dzieckiem hs-title-size-4

Może lepiej było by zapłacić komuś kto się na tym zna? Bo twoje zmiany i tak znikną przy najbliższym update tempate-u.

Możesz próbować na pałe zrobić to

@media screen and (max-width: 800px) {
  
    .hs-title-size-1 {
        padding-right:20% !important;
        padding-left: 20%; !important;
 }
     
    .hs-title-size-4 {
        font-size: 25px !important;
        margin-top: 20vh !important;}
     
}

Wiedz jednak że należy stylować tak aby nie trzeba było używać !important;