Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Konrad Pilch
Konrad Pilch
2,435 Points

I forget how to do it : p

HI, i forget how to do it. My last code is a little too messed up : p

Could somebody tell me how to align , or rather, how to have the right and left links both the same on mobile?

<!DOCTYPE html>
<html lang="en">
    <head>

        <title></title>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

        <!-- Seo meta -->
        <meta name="keywords" content="" />

        <!-- Custom CSS -->
        <link href="includes/css/styles.css" rel="stylesheet">
        <link rel="stylesheet" href="fonts/font-awesome.min.css">

        <!-- Ajax & Bootstrap -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    </head>
    <body>

        <!-- Header -->
        <header class="row" id="header">
            <nav class="navbar navbar-default navbar-fixed-top">
                <div class="container">
                    <div class="container-fluid">

                        <!-- Movile and Brand -->
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapse-1">
                                <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="#">PHP Showoff</a>

                        </div>


                        <!-- Links of the nav, forms and other content -->
                        <div class="collapse navbar-collapse" id="nav-collapse-1">
                            <ul class="nav navbar-nav">
                                <li>
                                    <a href="">Simple</a>
                                </li>
                                 <li>
                                    <a href="">Film Search</a>
                                </li>
                                 <li>
                                    <a href="">News Feeds</a>
                                </li>
                                 <li>
                                    <a href="">Posts</a>
                                </li>
                                 <li>
                                    <a href="">Adding Films</a>
                                </li>
                            </ul>

                            <div class="mobile-block"></div>

                            <ul class="nav navbar-nav pull-right">
                                <li>
                                    <a href="">Log In</a>
                                </li>
                                 <li>
                                    <a href="">Sign Up</a>
                                </li>
                            </ul>
                        </div><!-- /collapse navbar-collapse -->

                    </div><!-- /container-fluid -->
                </div><!-- /container -->
            </nav><!-- /navbar -->
        </header>

/*

My Custom CSS
============

Author:  
Updated: 
Notes:   

Email: 

*/



/* --------------------------------------
   Global Styles
   -------------------------------------- */
body{
   margin-top:60px;
   line-height: 2em;
}
.unstyled{
   margin:0;
   padding:0;
   list-style: none;
}
.clear{
   clear:both;
}
.clearR{
   clear:right;
}
.clearL{
   clear:left;
}


/* --------------------------------------
   Header
   -------------------------------------- */
   /* Navbar */
   .navbar-default{
      background: #606060; 
   }
   /* Brand */
   .navbar-default .navbar-brand{
      color:#FFF;
   }
   .navbar-default .navbar-brand:hover{
     color:#FFF;
   }

   /* Links */
   .navbar-default .navbar-nav>li>a:hover{
      color:  #D4D4D4;
   }
   .navbar-default .navbar-nav>li>a{
      color:#FFF;
   }


/* --------------------------------------
  Footer
   -------------------------------------- */
   #footer{
      margin-top:60px;
   }

   /* Top Footer */
   .top-footer{
      background: #606060;
      padding-top:10px;
      padding-bottom:10px;
      text-align: center;
   }
   .top-footer li a{
      color:#D0D0D0;
      text-decoration: none;
   }
   .top-footer li a:hover{
      color:#FFF;
   }


   /* Bottom Footer */
   .bottom-footer{
      text-align: center;
      padding-top:5px;
      background: rgb(88, 88, 88);
      height:auto;
      color:#FFF;
   }


/* --------------------------------------
   Experience
   -------------------------------------- */



/* --------------------------------------
   Portfolio
   -------------------------------------- */



/* --------------------------------------
   About
   -------------------------------------- */



/* --------------------------------------
   Contact
   -------------------------------------- */



/* --------------------------------------
   Footer
   -------------------------------------- */



/* --------------------------------------
   Media Queries
   -------------------------------------- */

/* Portrait & landscape phone */
@media (max-width: 480px) {





}


/* Landscape phone to portrait tablet */
@media (max-width: 768px) {


   /* Mobile Nav */
  .navbar-default, .nav, .navbar-nav{
      float:left;
   }
   .mobile-block{
   display: block !important;
   }
   .navbar-default, .nav, .navbar-nav{
      width:100%;
      text-align: center;
   }


}


/* Tablet desktop */
@media (min-width:768px) and (max-width:1110px){



}

And what do you think about my strucutre for now? if you were hiring xd would you be ok of how i do things?

1 Answer

Melissa Wheeler
Melissa Wheeler
6,306 Points
Melissa Wheeler
Melissa Wheeler
6,306 Points

When you say you want to make your links the same are you saying that you want your CSS to apply to all you links at the same time, but keep one set to the left and the other to the right?

If that's what your asking i would do the following...

.nav navbar-nav {
 float: left; /***or how ever you plan on getting it to the left***/
}

.nav navbar-nav pull-right {
float: right; /***or how ever you plan on getting it to the right***/
}

/***add what ever margin, padding, or text alignment needed to get them positioned
 as desired***/

.nav navbar-nav
.nav navbar-nav pull-right {
 /***apply what ever styling you desire and they should come out the same but in there 
separate locations***/ 
}

not sure if this is what you were wanting. as to your other question i'm just a student like you so i don't know what a perspective employer would prefer but i personally had a hard time reading your code because of the long class and id names and because of all the extra spacing.

Hope this helps

Konrad Pilch
Konrad Pilch
2,435 Points

Oh, i use spacing to read it fast as it's clear for me: p but you just gaved me an idea. I can't try the code now but I think o know what I should do, maybe. I never really practice mobile na much. Thank you!