WBCE CMS Forum

herbi

Mitglied

Logo in SmartPhone-Ansicht ausblenden

Servus,

Auf dieser Start-Seite: Testseite
soll das Logo in der Smartphone-Ansicht ausgeblendet und die Sliderbilder in der Größe angepasst werden.

Es ist ein adaptiertes Responsee-Template "Prospera".

In der Template-Style-Css  sind folgende Anweisungen für die Media-Queries hinterlegt:

[== CSS ==]
@media screen and (max-width:480px) {
	.logo img {
    max-width: 100px;
  }
}
@media screen and (max-width: 768px) { 
  .background-image {
    background-position: center;
  }
} 

Habe dem Logo in der Index die Classe="logo" zugewiesen, aber, irgendwie klappt es nicht so wie ich es mir wünsche.

Danke.

---

Jeder meint, seine Wahrheit ist die Richtige. 

florian

Administrator

Re: Logo in SmartPhone-Ansicht ausblenden

In Responsee gibt es die Klasse hide-s, d.h. du kannst das Logo mit
<div class="hide-s l-2">
          <a href="<?php echo WB_URL;?>"><img src="<?php echo TEMPLATE_DIR;?>/img/logo2.png" alt=""></a>
            <!-- <a href="index.html" class="logo"><img src="img/logo-free.png" alt=""></a> -->
          </div>
auf kleinen Screens ausblenden.

Die Sliderbilder könntest Du zwar verkleinern, in dem Du zwei Zeilen in der template-style.css auskommentierst, dann gibt es aber ein Problem mit dem darauf platzierten Text.

Ich würd's eher umgekehrt machen. D.h. zusehen, dass das Logo auch in der Mobilansicht gut aussieht und den Slider ausblenden.

Beitrag geändert von florian (12.08.2020 18:12:35)

---

Code allein macht nicht glücklich. Jetzt spenden!

herbi

Mitglied

Re: Logo in SmartPhone-Ansicht ausblenden

Hallo Florian,

ich bekomme es nicht gebacken.
Wo, im folgendem Code, muss ich den DIV mit der hide-Classe einbinden.
Habe es über den IMG probiert, hatte aber zur Folge, dass mir das Bild klein angezeigt wird.
Ebenso unterhalb der Section.
Habe auch die "s-12 center" mit "hide-s" ergänzt, wirkt aber nicht.

l-2 ist doch 2-spaltig bei normal Ansicht, oder?

Das Carousel habe ich mit Code2 eingebunden.

[== HTML ==]
 <section class="section background-dark">

        <div class="line">
<div class="carousel-fade-transition owl-carousel carousel-main carousel-nav-white carousel-wide-arrows">
            <div class="item">
              <div class="s-12 center">
                <img src="templates/prospera/img/slide4.jpg" alt="">
                <div class="carousel-content">
                  <div class="padding-2x">
                    <div class="s-12 m-12 l-8">
                      <p class="text-white text-s-size-20 text-m-size-40 text-l-size-60 margin-bottom-40 text-thin text-line-height-1">Muddy Fox <br> Running Rocks
                      <p class="text-white text-size-16 margin-bottom-40">Muddy Fox Running Rocks e.V. steht für Spaß, Action und Zusammenhalt. Gemeinsam stürzen wir uns in jedes Abenteuer und kosten es bis zum Ende aus.
                    </div>                  
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="s-12 center">
                <img src="templates/prospera/img/slide5.jpg" alt="">
                <div class="carousel-content">
                  <div class="padding-2x">
                    <div class="s-12 m-12 l-8">
                      
                      <p class="text-white text-s-size-20 text-m-size-40 text-l-size-60 margin-bottom-40 text-thin text-line-height-1">Sportliche Abenteuer <br> Persönlicher Ansporn</p>
                      <p class="text-white text-size-16 margin-bottom-30">Muddy Fox Running Rocks e.V. reicht von ambitionierten Wettkämpfern bis hin zu gemütlichen Freizeitsportlern.</p>    
                   
                    </div>                  
                  </div>
                </div>
              </div>
            </div>
          </div>  
          
        </div>

</section>

---

Jeder meint, seine Wahrheit ist die Richtige. 

florian

Administrator

Re: Logo in SmartPhone-Ansicht ausblenden

l-2 bedeutet nicht zweispaltig, sondern "zwei Zwölftel der verfügbaren Rasterbreite auf großen Displays".
s-12 bedeutet "zwölf Zwölftel (also volle Rasterbreite) auf kleinen Displays". "s-12" und "hide-s" schließen sich also gegenseitig aus.

Wenn der Slider auf kleinen Displays nicht angezeigt werden soll, müsste es eigentlich funktionieren,
        <div class="line">
zu
        <div class="line hide-s">
zu ändern.

---

Code allein macht nicht glücklich. Jetzt spenden!

herbi

Mitglied

Re: Logo in SmartPhone-Ansicht ausblenden

Nee, leider nicht!

---

Jeder meint, seine Wahrheit ist die Richtige. 

florian

Administrator

Re: Logo in SmartPhone-Ansicht ausblenden

hide-s greift nur bei einer Displaybreite von bis zu 480 Pixeln. Darüber würde dann hide-m greifen.

---

Code allein macht nicht glücklich. Jetzt spenden!

herbi

Mitglied

Re: Logo in SmartPhone-Ansicht ausblenden

Danke, geht! 

---

Jeder meint, seine Wahrheit ist die Richtige.