Responsywność

Question

Witam

Napisałem już dość sporo, lecz dopiero teraz biorę się za responsywność.

Strona poniżej width: 1000px pokazuje mi pasek bocznego scrolla, lecz na chromowym F12 nic takiego mi nie pokazuje. Wiem tyle, że jest to gdzieś w sekcji main. Ma ktoś może jakiś sposób na wykrycie co to, albo ktoś wie co to sprawia? Pozdrawiam

jeszcze link do strony: http://portfolio-beta-aven.prv.pl/

<main>
    <article>
        <div class="oferta">
            <div class="ofertaC">
                <div id="ourService"><h1>Our Service</h1></div>
                <div class="ofertaLeft">
                <div class="ofertaIcon"><i class="demo-icon icon-note-beamed"></i><h3>Music</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, voluptatibus, expedita? Quis cumque.</p></div>
                <div class="ofertaIcon"><i class="demo-icon icon-mail-alt"></i><h3>E-mail</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, voluptatibus, expedita?</p></div>
                <div style="clear: both"></div>
                <div class="ofertaIcon"><i class="demo-icon icon-download-cloud"></i><h3>Cloud</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, voluptatibus, expedita? Quis cumque, suscipit libero </p></div>
                <div class="ofertaIcon"><i class="demo-icon icon-euro"></i><h3>Prices</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, voluptatibus, expe. </p></div>
                <div style="clear: both"></div>
                </div>
                <div class="ofertaRight">
                    <img id="cadred" src="img/cadred.png">
                </div>
                <div style="clear: both"></div>
            </div>
        </div>
    </article>
    <section>
        <div class="break">
            <h1 class="headSection">Newsletter</h1>
            <h4>Join our news letter today, and stay informed</h4>
            <div class="input-group">
                <input type="text" class="form-control" placeholder="E-mail">
                <span class="input-group-btn">
                    <button class="btn btn-primary" type="button">Add</button>
                </span>
            </div>
        </div>
    </section>
    <article>
        <div class="teamCBig">
            <div class="teamC">
               <div id="feedback"><h1>Our Team</h1></div>
                   <div class="teamImgs">
                   <div class="singleC"><div class="teamCImg"><img src="img/a1.png"></div><h3>Margaret Zuth</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime nihil, velit! Distinctio veniam nesciunt vel saepe dolores iusto perferendis totam.</p></div>
                   <div class="singleC"><div class="teamCImg"><img src="img/a2.png"></div><h3>Morgan Brown</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur nemo, obcaecati. Distinctio, beatae reiciendis non sint, laboriosam dolorum. Quidem eius illum vero ullam doloremque esse?</p></div>
                   <div class="singleC"><div class="teamCImg"><img src="img/a3.png"></div><h3>Elisa Osborn</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam provident dolore, est officia distinctio saepe quidem rem.</p></div>
                   <div class="singleC"><div class="teamCImg"><img src="img/a4.png"></div><h3>Cornelia Korn</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae cum fugit quis corporis possimus, reprehenderit accusamus. Accusantium delectus animi consectetur pariatur cupiditate error, officiis doloremque.</p></div><div style="clear: both"></div>
                   </div>
            </div>
        </div>
    </article>
    <section>
        <div  class="break2">
            <div id="gallery"><h1 class="headSection">Gallery</h1></div>
            <div class="galleryC">
                  
                <div class="galleryImg" number="0"><img src="img/frame-002.jpg">
                <div class="galleryData" id="galleryData0a"></div> </div>
                <div class="galleryImg" number="1"><img src="img/mountain-landscape-2031539_640.jpg">
                <div class="galleryData" id="galleryData1a"></div> </div>
                <div class="galleryImg" number="2"><img src="img/landscape-228263_640.jpg">
                <div class="galleryData" id="galleryData2a"></div> </div>
                <div class="galleryImg" number="3"><img src="img/Shadows.jpg">
                <div class="galleryData" id="galleryData3a"></div> </div>
                <div style="clear: both"></div>
            </div>        
        </div>
    </section>
        <article>
        <div class="formCBig">
            <div class="formC">
               <div id="feedback"><h1>Give Us Feedback</h1></div>
               <form>
                    <div class="input-group">
                        <input type="text" id="ideaForm" value="" class="form-control" placeholder="Idea...">
                        <span class="input-group-btn">
                            <button id="add" class="btn btn-primary" type="button">Add</button>
                        </span>
                    </div>
                    <div class="answer"><p>We'll fix it soon, thanks for information</p></div>
                    <div class="taskC">
                    <div class="input-group">
                        <span class="input-group-btn">
                            <button class="btn btn-success" type="button"><i class="demo-icon icon-thumbs-up"></i></button>
                        </span>
                        <div class="inside"><p>Desing and style</p></div>
                        <span class="input-group-btn">
                            <button class="btn btn-danger" type="button"><i class="demo-icon icon-thumbs-down"></i></button>
                        </span>
                    </div>
                    <div class="input-group">
                        <span class="input-group-btn">
                            <button class="btn btn-success" type="button"><i class="demo-icon icon-thumbs-up"></i></button>
                        </span>
                        <div class="inside"><p>Layout and arrangement</p></div>
                        <span class="input-group-btn">
                            <button class="btn btn-danger" type="button"><i class="demo-icon icon-thumbs-down"></i></button>
                        </span>
                    </div>
                    <div class="input-group">
                        <span class="input-group-btn">
                            <button class="btn btn-success" type="button"><i class="demo-icon icon-thumbs-up"></i></button>
                        </span>
                        <div class="inside"><p>Functionality</p></div>
                        <span class="input-group-btn">
                            <button class="btn btn-danger" type="button"><i class="demo-icon icon-thumbs-down"></i></button>
                        </span>
                    </div>
                </div>   
                </form>
            </div>
        </div>
    </article>
</main>

Comments

Tutaj dodaje SCSS:

@mixin gradient($from, $for, $to)
{
    background-image: linear-gradient($from, $for, $to);
}
@mixin Rgradient($from, $to)
{
    background-image: radial-gradient($from, $to);
}
@mixin medium
{
    @media only screen and (max-width: 1024px) {
        @content; 
    }
}
@mixin mobile
{
    @media only screen and (max-width: 640px) {
        @content; 
    }
}

$firstCol: #5454db;
$secondCol: #4b4b4b;

body{
    font-family: 'Roboto', sans-serif;
    margin: 0px;
    padding: 0px;
}
.navCMain{
    height: 40px;
    margin: 0;
    padding: 0;
    right: 0;
    position: absolute;
}
.navMain{
    display: flex;
    margin: 0px auto 0;
    padding: 0;
    justify-content: center; 
    height: 35px;
    width: 500px;
    
    @include medium{
        width: 55vw;
        height: 50px;
        padding: 5px 0;
    }
    
    .navBtn{
        list-style-type: none;
        text-align: center;
        flex-basis: 30%;
        padding: 2px;
        margin-top: 3px;
        border-right: 2px solid $firstCol;
        font-size: 1.1em;
        font-weight: 700;
        color: white;
        transition: all .1s ease;
        p{
            opacity: .7;
        }
        p:hover{
        cursor: pointer;
        opacity: 1;   
    }
    }
    .navBtn:last-child
    {
        border-right: 0px solid $firstCol;
    }
}

/*Balls*/

.logoC{
    background: url(../img/random_grey_variations.png) center;
    height: 400px;
    border-bottom: 2px solid $firstCol;
    box-shadow: 0 5px 25px $secondCol;
    
    @include medium{
            height: 200px;           
        }
    
    #circleC{
        width: 1000px;
        margin: auto;
        
        @include medium{
            width: 100vw;
            
        }
    }
    
    #circle1{
        @include Rgradient (#ef6d6d, #c33434);
        height: 120px;
        width: 120px;
        border-radius: 50%;
        float: left;
        margin-top: 200px;
        margin-left: 25px;
        transition: all .2s ease-in-out;
        
        @include medium{
            width: 60px;
            height: 60px;
            margin-top: 100px;
        }
        
        p
        {
            text-align: center;
            margin-top: 42px;
            font-size: 1.5em;
            font-weight: 700;
            color: $secondCol;
            transform: rotate(10deg);
            
            @include medium{
                font-size: 1.2em;
                margin-top: 17px;
        }
        }
    }
    #circle1:hover{
        
        transform: rotate(-10deg) scale(1.05);
        box-shadow: 0 0 30px white;
        cursor: pointer;
        
    }
    #circle2{
        @include Rgradient (#84ff8a, #2eb234);
        height: 220px;
        width: 220px;
        border-radius: 50%;
        float: left;
        margin-left: 30px;
        margin-top: 25px;
        transition: all .2s ease-in-out;
        
        @include medium{
            width: 120px;
            height: 120px;
            margin-top: 50px;
        }
        
        p
        {
            text-align: center;
            margin-top: 85px;
            font-size: 2em;
            font-weight: 700;
            color: $secondCol;
            transform: rotate(-10deg);
            
            @include medium{
                font-size: 1.2em;
                margin-top: 47px;
        }
        }   
    }
    #circle2:hover{
        
        transform: rotate(10deg) scale(1.05);
        box-shadow: 0 0 30px white;
        cursor: pointer;
        
    }
    #circle3{
        @include Rgradient (#7696ff, #3854b2);
        height: 150px;
        width: 150px;
        border-radius: 50%;
        float: left;
        margin-left: 25px;
        margin-top: 150px;
        transition: all .2s ease-in-out;
        
        @include medium{
            width: 75px;
            height: 75px;
            margin-top: 40px;
        }
        
        p
        {
            text-align: center;
            margin-top: 57px;
            font-size: 1.5em;
            font-weight: 700;
            color: $secondCol;
            transform: rotate(5deg);
            
            @include medium{
                font-size: .75em;
                margin-top: 30px;
        }
        }
        
    }
    #circle3:hover{
        
        transform: rotate(-5deg) scale(1.05);
        box-shadow: 0 0 30px white;
        cursor: pointer;
        
    }
    #circle4{
        @include Rgradient (#ffff91, #c4c43b);
        height: 260px;
        width: 260px;
        border-radius: 50%;
        float: left;
        margin-left: 25px;
        margin-top: 100px;
        transition: all .2s ease-in-out;
        
        @include medium{
            width: 130px;
            height: 130px;
            margin-top: 60px;
        }
        
        p
        {
            text-align: center;
            margin-top: 110px;
            font-size: 1.8em;
            font-weight: 700;
            color: $secondCol;
            transform: rotate(-10deg);
            
            @include medium{
                font-size: 1.3em;
                margin-top: 50px;
        }
        }
    }
    #circle4:hover{
        
        transform: rotate(10deg) scale(1.05);
        box-shadow: 0 0 30px white;
        cursor: pointer;
        
    }
    #circle5{
        @include Rgradient (#fa72ff, #bf36c4);
        height: 100px;
        width: 100px;
        border-radius: 50%;
        float: left;
        margin-left: 25px;
        margin-top: 50px;
        transition: all .2s ease-in-out;
        
        @include medium{
            width: 70px;
            height: 70px;
            margin-top: 100px;
        }
        
        p
        {
            text-align: center;
            margin-top: 35px;
            font-size: 1.3em;
            font-weight: 700;
            color: $secondCol;
            transform: rotate(10deg);
            
            @include medium{
                font-size: 1.1em;
                margin-top: 25px;
        }
        }    
    }
    #circle5:hover{
        
        transform: rotate(-10deg) scale(1.05);
        box-shadow: 0 0 30px white;
        cursor: pointer;       
    }  
}

/*Oferta*/

.oferta{
    
    height: 1000px;    
    
    .ofertaC{
        width: 1000px;
        height: 1000px;
        position: relative;
        margin: 0px auto;
        
        @include medium{
                width: 100vw;
        }
        
        #ourService{
            
            h1{
                font-weight: 700;
                text-align: center;
                margin-top: 200px;
                margin-bottom: 100px;
                font-size: 4em;
                text-transform: uppercase;
                border-bottom: 1px solid $secondCol;
                color: $secondCol;
            }
        }
        .ofertaLeft{
            margin-top: 100px;
            float:left;
            width: 800px;
            margin-left: 20px;
            
            @include medium{
                width: 700px;
                }
            
            .ofertaIcon{
                float:left;
                width: 280px;
                text-align: center;
                margin-top: 40px;
                
                i{
                    font-size: 4em;
                    color: $firstCol;
                    text-align: center;
                }
                h3{
                    text-align: center;
                    color: $secondCol;
                }
                p{
                    text-align: justify;
                    font-size: .9em;
                }
            }
            .ofertaIcon:nth-child(2){
                margin-left: 120px;
                
                @include medium{
                margin-left: 50px;
                }
            }
            .ofertaIcon:nth-child(5){
                margin-left: 120px;
                
                @include medium{
                margin-left: 50px;
                }  
            }
        }
        
        .ofertaRight{
            float: left;
    
            #cadred{
                position: absolute;
                right: 60px;
                bottom: 150px;
                width: 200px;
                
                @include medium{
                width: 180px;
                right: 40px;
                }
                
            }
        }
    }
}
.break{
    background-color: $secondCol;
    height: 220px;
    border-top: 2px solid $firstCol;
    box-shadow: 0 0px 30px $secondCol;
    border-bottom: 2px solid $firstCol;
    
    .headSection{
        text-align: center;
        padding-top: 20px;
        color: white;
        border-bottom: 1px solid white;
        width: 1000px;
        margin: auto;
        text-transform: uppercase;
        
        @include medium{
                width: 100vw;
        }
    }
    h4{
        text-align: center;
        padding-top: 20px;
        width: 1000px;
        color: white;
        margin: auto;
        
        @include medium{
                width: 100vw;
        }
    }
    .input-group{    
        width: 500px;
        margin: 40px auto 0px; 
        
        input[type=text]{
            height: 50px;
            font-size: 1.2em;
        }
        button{
            height: 50px;
            font-weight: 700;
            width: 80px;
            background-color: $firstCol;
            border: 1px solid #d4d4d4;
            opacity: .8;
        }
        button:hover{
            cursor: pointer;
            opacity: 1;
            color: white;
            box-shadow: 0 0 5px white;
        }
    }   
}
.formCBig{
    height: 750px;
    
    .formC{
        width: 1000px;
        margin: auto;
        height: 700px;
        
        @include medium{
                width: 100vw;
        }
        
        #feedback{
            text-align: center;
            margin-top: 200px;
            font-weight: 700;
            margin-bottom: 100px;
            font-size: 4em;
            border-bottom: 1px solid $secondCol;
            
            h1{
                font-size: 1em;
                font-weight: 700;
                color: $secondCol;
                text-transform: uppercase;
            }
        }
        
        
        .input-group{
            width: 500px;
            margin: 20px auto;
              
            .btn-success{
                
            }
            .btn-danger{
                
            }
            .btn-primary{
                height: 50px;
                background-color: $firstCol;
                font-size: 20px;
                font-weight: 700;
                
            }
            .inside{
                width: 500px;
                border: 1px solid $secondCol;
                
                p
                {
                    text-align: center;
                    margin-top: 5px;
                    height: 0px;
                }
            }
        }
        .taskC{
            margin-top: 10px;
        }
        
        .answer{
            text-align: center;
            border: 2px solid #ff3737;
            width: 300px;
            height: 30px;
            margin: 70px auto 0px;
            border-radius: 5px;
            background-color: #efa3a3;
            
            p{
                margin-top: 2px;
                font-size: .9em;
            }
        }
    }
}
.break2{
    @extend .break;
    height: 900px;
    
    #gallery{
        @extend #feedback;
        width: 1000px;
        margin: auto;
        text-transform: uppercase;
        border-bottom: 1px solid white;
        
        @include medium{
                width: 100vw;
        }
    }
        
    .galleryC{
        width: 1000px;
        margin: 70px auto;
        height: 690px;
        
        @include medium{
                width: 100vw;
        }
            
        .galleryImg{
            float: left;
            overflow: hidden;  
            margin: 25px 25px;
            display: block;
            position: relative;
            justify-content: center;
            align-items: center;
            transition: all .4s ease-in-out;
            
            
            
            p{
                
            }
            
            .galleryData{
            width: 165px;
            height: 80px;
            margin: auto;
            padding: 5px;
            opacity: 0;
            position: absolute;
            left: 0px;
            bottom: -7px;
            z-index: 1020;
            
            p{
            color: white;
            line-height: 7px;
            margin-top: 6px;
            font-size: 12px;
            text-shadow: 0px 0px 10px black,
                -1px -1px 0 black,
                1px -1px 0 black,
                -1px 1px 0 black,
                1px 1px 0 black;
            }
        }
        }
        .galleryImg img{      
            height: 253px;
            width: 450px;
            transition: all .4s ease-in-out;
        }
        .galleryImg img:hover{
            transform: scale(1.1) rotate(3deg);
            cursor: pointer;    
        }
        
     }
}
.galleryActive{
    transform: scale(1.07);
    transition: all .3s;
}
.galleryDeactive{
    transform: scale(.95);
    transition: all .3s;
    opacity: .1;

}
.teamCBig{
    height: 1000px;
    
    @include medium{
                width: 100vw;
        }
    
    .teamC{
        @extend .formC;
        
        .teamImgs{
            margin-left: 16px;
            
            .singleC{
                height: 550px;
                width: 220px;
                margin: 100px 10px;
                float: left;
                
                h3{
                    text-align: center;
                }
                p{
                    border-top: 1px solid $firstCol;
                    width: 200px;
                    margin: auto;
                    padding: 10px;
                }
            }
        
        .teamCImg{
            border: 1px solid $firstCol;
            border-radius: 50%;
            overflow: hidden;
            width: 200px;
            margin: 20px auto;

            }
        }
    }
}
.breakF{
    @extend .break;
    height: 45px;

 

Answer 1

Jeżeli tworzysz stronę, to już przy jej zamyśle jest wskazane abyś myślał o responsywności - nie wtedy, kiedy już masz gotowy szablon, ponieważ zdecydowanie trudniej będzie Ci ją przystosować. Jeżeli już napisałeś HTMLa, to przynajmniej pomyśl o CSSie przed jego napisaniem - on też musi być dobrze sklecony.

1. Przede wszystkim: nie określamy w stylach za pomocą id.
2. Nie nadajemy sztywnych wartości dla elementów. 

   .logoC #circleC {
       width: 1000px;
       margin: auto;
   }

   Czy nie lepiej dać min-width? I przy okazji - a może użyć by wrappera, który będzie miał określone cechy dla całej strony?

3. Aby responsywność działała, musisz dodać viewport. O nim możesz przeczytać tutaj: Responsive Web Design
4. Ja to bym napisał od początku :D

Comments

Rozumiem i dziękuje także za pomoc