WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 12.08.2020 16:47:46

herbi
Member

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.  smile

Offline

#2 12.08.2020 17:11:56

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.
attachment.php?item=2572&download=1

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

Last edited by florian (12.08.2020 17:12:35)

Offline

Liked by:

herbi

#3 12.08.2020 18:00:04

herbi
Member

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.  smile

Offline

#4 12.08.2020 18:15:06

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.

Offline

#5 12.08.2020 18:32:12

herbi
Member

Re: Logo in SmartPhone-Ansicht ausblenden

Nee, leider nicht!


Jeder meint, seine Wahrheit ist die Richtige.  smile

Offline

#6 12.08.2020 18:50:07

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.

Offline

#7 12.08.2020 19:00:20

herbi
Member

Re: Logo in SmartPhone-Ansicht ausblenden

Danke, geht!  smile


Jeder meint, seine Wahrheit ist die Richtige.  smile

Offline

Board footer

Powered by FluxBB

up