Making website responsive

adamgeek · October 4, 2015, 7:29am

Hey guys I am trying to make website responsive but when I resize my browser it doesn’t work. I have added bootstrap links and viewport meta but when I resize my browser the buttons jump over each others and nothing is responsive as I expected here is my code.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html"; charset="utf-8">
        <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="icon" href="assets/img/favicon.ico">
        <title>Muhamamd Ali - Front End Developer | </title>
        
        <!-- Core Bootstrap CSS -->
        <link href="assets/css/bootstrap.min.css" rel="stylesheet">
        
        <!-- Devicon -->
<link rel="stylesheet" href="assets/css/devicon-master/devicon.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/89f2f44ba07ea3fff7e561c2142813b278c2d6c6/devicon.min.css">
<!-- Font Awesome -->
        <link href="assets/css/font-awesome/css/font-awesome.min.css" rel="stylesheet">
        <!-- Custom CSS -->
        <link href="assets/css/custom.css" rel="stylesheet">
        
        <!--Google Fonts -->
        <link href='http://fonts.googleapis.com/css?family=Raleway:400,700' rel='stylesheet' type='text/css'>
        <!-- Slick Crousel -->
        <link rel="stylesheet" type="text/css" href="assets/css/slick-theme.css"/>
        <link rel="stylesheet" type="text/css" href="assets/css/slick.css"/>
        
        <!-- HTML5 shiv and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    
    </head>
    <body data-spy="scroll" data-target="#main-navbar">
        
        <!---HEADER
        ======================================================================== -->
        <header class="site-header" role="banner">
            
            <!---NAVBAR
        ======================================================================== -->
            <div class="navbar-wrapper">
                <div class="navbar navbar-inverse navbar-fixed-top" id="main-navbar" role="navigation">  
                    <div class="container">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false" aria-controls="navbar" >
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a class="navbar-brand" href="/"></a>
                        </div><!--navbar-header-->
                            <div class="navbar-collapse collapse">
                                <ul class="nav navbar-nav navbar-right">
                                    <li class="active"><a href="/">Home</a></li>
                                    <li><a href="#about-me">About Me</a></li>
                                    <li><a href="#skills">Skills</a></li>
                                    <li><a href="#portfolio">Portfolio</a></li>
                                    <li><a href="#kudos">Testimonials</a></li>
                                    <li><a href="#contact">Contact</a></li>
                                </ul>
                            </div><!--navbar-collapse-->
                    </div><!--container-->
                </div><!--navbar-->
            </div><!--navbar-wrapper -->
            
        
        </header>
        
        <!---HERO
        ======================================================================== -->
        <section id="hero" data-type="background" data-speed="5">
            <article>
                <div class="container clearfix">
                    <div class="row">
                        <div class="circular">
                       
                        
                        </div><!--Circular-->
                        
                        <div class="col-sm-7 hero-text">
                            <h1>I'm <span>Ali</span></h1>
                            <p class="subtitle">Front End Developer | Web Designer | SEO Specialist</p>
                            
                            <div class="menu">
  <ul>
    <li><a href="/"><i class="fa fa-facebook fa-2x"></i></a></li>
    <li><a href=""><i class="fa fa-twitter fa-2x"></i></a></li>
    <li><a href=""><i class="fa fa-google-plus fa-2x"></i></a></li>
  </ul>
</div>


                            </div>
                        </div><!--Col-->
                    
                    </div><!--Row-->
                
                </div><!--Container-->
            
            
            </article>
        
        </section><!--Hero-->

        <!-- ContactOption -->

  <section id="resume">
    <div class="container">
        <div class="row">
            
            
            <div class="col-sm-4">
                                    <button class="btn btn-success btn-lg btn-block" data-toggle="modal" data-target="#myModal">
                        Download my Resume!</button>
                            </div><!-- col -->
            <div class="col-sm-4">
                <button class="btn btn-success btn-lg btn-block hireme" data-toggle="hire" data-target="hireme">Hire Me!</button>
            </div>
        </div><!-- row -->
    </div><!-- container -->
</section>
        
        <!---About Me
        ======================================================================== -->
        <section id="about-me" data-type="background" data-speed="3">    
            <div class="container">
                
                   <div class="section-header">
                       
                       
                       <h2> My Intro</h2>
                
                        <p class="lead"> I am a web designer, front-end developer, and SEO Specialist. I have 2.5 years experience working in various web related projects. </p>
                            <div class="row">
                                
                                <div class="col-sm-6">
                                <h3>Working with clients</h3>
                        <p>I’ve worked with clients from around the world, providing responsive web design, front-end development, and WordPress integrations.
                        Mostly I work with clients from freelancer and Personal Reference.</p>
                        </div>

                        <div class="col-sm-6 lol">
                            
    <h3>I'm Certified Developer</h3>
    <p>I have taken Online classes on Web Development and SEO which were taught by Professional teachers. I have certificates from Udemy TreeHouse and Code College. I keep on learning and update myself with new technologies. <span>Coding is my Passion</span></p>
                        </div>

                                </div>
                            
                            
                        
                    
                </div>
        
        </section><!-- about -->
        
        <!---skills
        ======================================================================== -->
        <section id="skills" data-speed="5" data-type="background">
        <div class="container">
            
            <div class="skills">
                <h2> My skills</h2>
                
                 <i class="devicon-html5-plain-wordmark"></i>
 <i class="devicon-css3-plain-wordmark"></i>
 <i class="devicon-bootstrap-plain-wordmark"></i>
 <i class="devicon-javascript-plain"></i>
 <i class="devicon-jquery-plain-wordmark"></i>
  <i class="devicon-php-plain"></i>
  <i class="devicon-wordpress-plain-wordmark"></i>
   <i class="devicon-angularjs-plain"></i>
   <i class="devicon-codeigniter-plain-wordmark"></i>
 <i class="devicon-photoshop-plain-wordmark"></i>
</div>
</div>
            
        </section>
        
        <!---Portfolio
        ======================================================================== -->
        <section id="portfolio" data-speed="8" data-type="background">

        <div class="port">
        <h2>my Portfolio</h2></div>

<ul id="links">
    <li><a href="#" style="background-color: rgb(153, 150, 145);"><img src="assets/img/greytv.png" alt="Grey Tv"></a></li>
    <li><a href="#" style="background-color: #fff"></a></li>
    <li><a href="#" style="background-color: #3D8D94"></a></li>
    <li><a href="#" style="background-color:#383838;"><img src="assets/img/aces.png" alt="aces"></a></li>
    <li><a href="#" style="background-color: #000" ></a></li>
    <li><a href="#" style="background-color:#090C0C"></a></li>
</ul>
        
        
        </section>
        
        <!-- Testimonials -->
        
        
                
        <section id="kudos"> <!-- Testimonials -->
        <div class="container">
            <div class="row">
                
<div class="col-sm-8 col-sm-offset-2">
<h2> Testimonials</h2>
</div><!-- col -->

<!-- Testimonials -->

<div class="row testimonial" data-speed="8" data-type="background">
    <div class="col-sm-4">
        <img src="assets/img/sarah.jpg" alt="Sarah">
    </div>
<div class="col-sm-8">
    <blockquote>
        
        I hired Ali for my Web development project and he worked above my expectations. Everything was perfect he is professional, knowledgeable, and friendly. If an issue arises, he is very responsive and come up with a solution quickly. I highly <strong>Recommend</strong> him.
        <cite> &mdash; Sarah, Digital Marketer</cite>
    </blockquote>
</div>
</div>
<div class="row testimonial">
    <div class="col-sm-4">
        <img src="assets/img/davies.jpg" alt="davies">
    </div>
<div class="col-sm-8">
    <blockquote>
        
       Ali has done a fantastic job. The design is repsonsive,code is clean and delievered me project on time. moreover website is SEO friendly.
        <cite> &mdash; Davies, Sleepless Media Agency</cite>
    </blockquote>
</div>
</div>
<div class="row testimonial">
    <div class="col-sm-4">
        <img src="assets/img/terri.jpg" alt="natasha">
    </div>
<div class="col-sm-8">
    <blockquote>
        
       Brilliant Job I am very satisfied with his work. He redesigned my Resturant website. which is very user friendly and looks very nice now and painless to handle the administration of the website. He also taught me SEO on skype which has helped me to promote my resturant and get new clients.
        <cite> &mdash; Natasha, Business Owner</cite>
    </blockquote>
</div>
</div>
            </div><!--row -->

        </div><!-- container -->
        </section><!-- testimonial -->
    
        
        <!---FOOTER
        ======================================================================== -->
        <footer>
        <div class="container">
            
<div class="col-sm-3">
    <p> <a href="/"><img src="assets/img/logo.png" alt="logo"></a></p>
</div>
<div class="col-sm-6">
    

    <nav>
        
        <ul class="list-unstyled list-inline">
            <li><a href="">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Skills</a></li>
            <li><a href="">Portfolio</a></li>
            <li><a href="">Contact</a></li>

        </ul>
    </nav>
    </div>
    <div class="col-sm-3">
        
        <p class="pull-right">&copy; 2015 Muhammad Ali</p>
    </div>

        </div><!-- container -->
        </footer>
        

        
         <!---BOOTSTRAP CORE JAVASCRIPT
             placed at the end of the document so the pages load faster!
        ======================================================================== -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

    <script src="assets/js/jquery-2.1.1.min.js"></script>
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/main.js"></script>
                
                <!--Typekit Fonts -->
    <script type="text/javascript" src="//use.typekit.net/gla7wnd.js"></script>
    <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
    </body>
</html>

and my CSS

@import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
.col-sm-7 h1 {

    text-transform: uppercase;
    font-size: 65px;
    color: #FFF;
    font-weight: 400;
padding: 15px 20px;

margin: 0px auto 0.4em;
}
.col-sm-7 span {
    color: #FBB829;
}
.subtitle {
    padding: 15px 25px;
     border: 2px solid black;
    text-transform: uppercase;
    font-size: 18px;
    color: black;
    font-weight: 250;
    letter-spacing: 0.3em;
  margin-right: 25px;
  display:inline-block;
  position:relative;
 
}
.subtitle{
left:60%;
top: 50px;
 transform: translateX(-50%);

} 
.menu a{

margin: 8px;
}
.menu { position: absolute;
    right: 150px;
    top: 275px;
 }
.menu ul { display:inline-table;}
.menu ul li {display:inline;
margin: 0 0 3px 0;}
body    {
    position: relative;
    margin-top: 50px;
    font-family: 'proxima-nova', 'Raleway', Helevetica, sans-serif;
    font-size: 16px;
}
#about-me {
    background: url('../img/tile.jpg') top left repeat;
    font-family: 'proxima-nova', 'Raleway', Helevetica, sans-serif;
    font-size: 16px;
}
a:link, a:visited {

    color:#dd5638;
}

a:hover {

    text-decoration: none;
    color:#c9302c;
}
p {

    margin: 0 0 15px;
}
/* ===HERO=== */

#hero   {
    background: rgba(200, 100, 150, 60) url('../img/splash-img.jpg') 50% 0 repeat fixed;
    min-height: 500px;
    padding: 40px 0;
    color: white;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
width: 100%;
    height: 100%;
    opacity : 1.5;
    z-index: -1;
}

#hero article   {
    width: 100%;
    text-align: center;
}

#about-me h1 {

    font-family: 'proxima-nova', 'Raleway', Helevetica, sans-serif;
    text-align: center;
    color: black;
    
    
}

section{
    padding: 80px 0;

    }

    .section-header {

text-align: center;
margin: 0px 0px 40px;
      
    
    }
    
    .secion-header {

        margin: 30px 0 10px;
    }
    .lol span {
        color: #FBB829;
        font-weight: bold;
    }

    .section-header h2 {
      
      margin:5pt 0 5%;

    display: inline-block;
font-size: 18px;
font-weight: 300;
text-transform: uppercase;
background: #FBB829 none repeat scroll 0% 0%;
    background-color: #FBB829;
    background-attachment: scroll;
    background-position: 0% 0%;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
color: #FFf;
letter-spacing: 0.3em;
padding: 0px 18px;
    padding-top: 0px;
    padding-right: 18px;
    padding-bottom: 0px;
    padding-left: 18px;
line-height: 60px;
height: 60px;
    }


    .skills h2 {
        margin:5pt 0 5%;

        display: inline-block;
font-size: 18px;
font-weight: 300;
text-transform: uppercase;
background: #FBB829 none repeat scroll 0% 0%;
    background-color: #FBB829;
    background-attachment: scroll;
    background-position: 0% 0%;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
color: #FFf;
letter-spacing: 0.3em;
padding: 0px 18px;
    padding-top: 0px;
    padding-right: 18px;
    padding-bottom: 0px;
    padding-left: 18px;
line-height: 60px;
height: 60px;
position: relative;
top: -80px;
left: 50%;
margin-bottom: 15%;
    
    }
.skills i  {
display: inline-block;
margin: 1%;
position: relative;
top: 30px;
font-size: 7.5rem;
position: relative;
top: 55px;
}

.port {

background: url('../img/tile.jpg') top left repeat;

}


#portfolio h2 {

    margin:5pt 0 5%;

        display: inline-block;
font-size: 18px;
font-weight: 300;
text-transform: uppercase;
background: #FBB829 none repeat scroll 0% 0%;
    background-color: #FBB829;
    background-attachment: scroll;
    background-position: 0% 0%;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
color: #FFf;
letter-spacing: 0.3em;
padding: 0px 18px;
    padding-top: 0px;
    padding-right: 18px;
    padding-bottom: 0px;
    padding-left: 18px;
line-height: 60px;
height: 60px;
position: relative;
top: -80px;
left: 50%;
margin-bottom: 15%;
}

ul#links li a {

width: 450px;
height: 250px;
display: inline-block;
margin-top: -6px;
margin-left: -5px


}

ul#links li { 

display: inline;}

#portfolio ul {
margin-top: -80px;
margin-left: -35px;
}

ul#links img {
padding-left: 50px;
padding-top: 70px;
display:block;
}




#resume {

    background-color: #3e4249;
    padding: 20px 0;
    color: white;
    -webkit-font-smoothing: antialiased;
    text-rendering:optimizeLegibility;
    font-size: 1.2em;

}

button, input, .btn, a.btn {

    -webkit-font-smoothing: antialiased;
    text-rendering:optimizeLegibility;
    color: white;
    margin: auto;
}

#kudos {

    text-align: center;
}

.testimonial {

    margin-bottom: 60px;
}
.testimonial img {
    -webkit-border-radius:50%;
    moz-border-radius: 50%;
    border-radius: 50%
}
blockquote {

    padding: 0;
    border: none;
    font-style: italic;
    text-align: left;
}

blockquote cite {

    display: block;
    color: #777;
    margin: 15px 0 0 0;
}

blockquote: before {

    display: none;
}
#kudos h2 {
margin-top: -50px;
position: relative;

top: -40px;
}

#kudos h2:hover::after {
    content: "";
  position: absolute;
  bottom: 2px;
  left: 0;
  height: 1px;
  width: 100%;
  background: #444;
  background: linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
}

footer {

    background:#3e4249;
    color: white;
    padding: 20px 0 10px;
    font-size: 12px;
}

footer p {

    margin:0;
}

footer a:link, footer a:visited {

    color:white;
}

footer a:hover {
    color:#dd5638;
}

.row + .row {

margin-top: 20px;
}

.hireme {

    margin-left: 75%;
}


@media  screen and (max-width: 991px;)

@media screen and (max-width: 768px;)

/*-----Blog*/

.post {

    position: relative;
    border: solid 1px #ddd;
    background: white;
    margin: 0 0 40px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.post-radius,
.post .post-excerpt {
    padding: 20px;


}

.post header h3 {

margin: 0 0 15px;

padding: 0 0 15px;

border-bottom: solid 1px #ddd;
}

.post header h1 {
margin: 0 0 15px;

padding: 0 0 15px;

border-bottom: solid 1px #ddd;
font-size: 24px;
}

.post-image {

    height: auto;
}

    .post-details {

        font-size:12px;
        width: 90%;
    }
.post-details i.fa {

    padding-left: 10px;
}

.post-details i.fa: first-child {

    padding:0;
}

.post-comments-badge {

    width: 70px;

height: 70px;
position: absolute;
top: 25px;
right: 20px;
border: none;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
background: #79b044;
text-align: center;
display: table;

}

.post-comments-badge a {
display: table-cell;
vertical-align: middle;
color:white;
font-size: 20px;
line-height: 20px;
}
.post-comments-badge i.fa {
    display: block;
font-size: 15px;
padding: 0;
margin-bottom: 4px;
}
.post-comments-badge:hover {
background-color: #8bc653;

}

img {

    max-width: 100%;
}

chrisofarabia · October 4, 2015, 10:08am

I’m not sure we can advise based on what we can see here alone. Can you do a few screenshots of the before/after it breaks, so we can understand what’s happening, and also give us an idea how you want it to look, even if that’s only a scribbled drawing? Better still, can you put the page on line somewhere ‘as is’ so we can see it in action?

PaulOB · October 4, 2015, 11:14am

Hi,

I can see a couple of problems with your code. the first is that you have placed your second button 75% from the left which means that on small screens it is still 75% from the left and therefore will overlap or stick out the viewport. You can fix it by removing the margin in the 768px media query.

e.g.

@media screen and (max-width:768px){
.hireme{margin:10px 0}
}

However your 75% is a bit of a ‘magic number’ and is something that you will have to consciously monitor in order to stop the page from breaking. A better approach would have been to use two of the bootstrap columns at 50% and then just center the button in each column and then you could more or less forget about it.

You should read up on the bootstrap documentation and make sure you follow the rules for the grid to the letter or you will get more problems. For example in your #kudos element you have nested a row inside another row which will give you two negative margins of -15px each adding up to a 30px margin which on small screens will give you a horizontal scrolbar at all times and break the mobile or small screen display.

Nested rows can only be nested inside columns because columns have 15px padding to soak up the negative margins (parent row should be inside a container but not nested rows).

Other things to watch out for are badly advised ‘centring or offsetting’ techniques using position:relative left:50% and then transform:translateX(-50%). This often leaves the element hanging out of the viewport unless the whole thing is wrapped up in an overflow:hidden. There are much better ways to center horizontally that will work on all browsers back to IE5 if needed. I would go as far as to say never use translate to center unless you know why you are doing it. There are much more simpler css ways to center elements of known and unknown widths anyway.

Therefore I would remove your translate or over-ride it like this.

.subtitle{
left:0;
transform:translateX(0px);
}

If you wanted to move that element just give it a margin-left and then take care of it in the media query. If you wanted to center it you could have used the bootstraps offsetting and centred it or text-align:center on a parent and then set the element to display:inline-block.

Hope that gives you a start anyway

system · January 3, 2016, 6:15pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.