CODEWITHSUNDEEP
htmlcss
Furkan İlhan
Furkan İlhan

Reputation: 65

Logo does not dwindle on Mobile

I have a html web site on here. Everything is fine on pc but when I browse the website on my phone the logo, slider texts and slider buttons do not dwindle. Here is the code of slider: 

<div class="fullwidthbanner-container">
    <div class="fullwidthbanner">
        <ul>
            <li data-fstransition="fade" data-transition="fade" data-slotamount="10" data-masterspeed="300">
                <img src="images/slider-02.jpg" alt="">
                <div class="caption text sfb" data-x="0" data-y="170" data-speed="400" data-start="800"  data-easing="easeOutExpo"><h2>AYDINLATMA ÜRÜNLERİMİZ</h2></div>
                <div class="caption text sfb" data-x="1" data-y="210" data-speed="400" data-start="1000" data-easing="easeOutExpo"><h3>AZ ENERJİ TÜKETEN ETKİLİ LAMBALAR</h3></div>
                <div class="caption text sfb" data-x="1" data-y="266" data-speed="400" data-start="1200" data-easing="easeOutExpo"><p>Çok daha az enerji ile daha etkili, zararsız ve <br/>ışık kirliliğine sebep olmayan lambalar.</p></div>
                <div class="caption sfb" data-x="650" data-y="170" data-speed="600" data-start="1300" data-easing="easeOutExpo"><img src="images/perdeli-isik.png" alt=""></div>
                <div class="caption sfb" data-x="900" data-y="71" data-speed="600" data-start="1200" data-easing="easeOutExpo"><img src="images/lamba.png" alt=""></div>
            </li>    
        </ul>
    </div>
</div>

CSS: 

.fullwidthbanner-container{
    max-width:1000px
    width: 100% !important;
    position: relative;
    padding: 0;
    max-height: 470px !important;
    overflow: hidden;
    background-image:url(../images/loader.gif);
    background-repeat: no-repeat;
    background-position: 50%;
}

Upvotes: 0

Views: 175

Answers (1)

matcygan
matcygan

Reputation: 725

Logo and slider content dont't have CSS to style them on smaller screens.

For logo fix is simple. You can change #logo a img height to: 65px; (style.css - about line 39), and #header #logo margin-top to 5px; (style.css - about line 257).

To fix slider you need to rebuild it in mobile view - there's too much content to display it in such a small box. As a fast and easy solution you can hide it on mobile devices. To do it in style.css, right after media query @media only screen and (max-width: 767px) { (line 238) add:

.fullwidthbanner-container {
    display: none;
}

Of course you can manage font-size on mobile if you think it's enough. To do it just change font-size in style.css - line 3992

@media only screen and (max-width: 479px) {

.caption h2 {font-size: 15px; margin-top: 0;}
.caption h3 {font-size: 18px; margin-top: 10px;}
.caption p {display: none}

Upvotes: 1

Related Questions