0

Hey guys I'm slowly learning how to make a site and I have read a lot about @media to make a responsive site but everytime I try it, it just doesnt work for me. I placed my html and the responsive code I worked up so far and im getting no where with it. In the responsive code I tried to make my header image cover 100% of with and have my nav bar come down vertically but what I wrote didnt work out. I did a lot of research on it but if anyonee could help me out I would be truly greatful

/*----Media----*/
@media only screen and (min-width: 150px) and (max-width: 1200px){
 .body{
  width:90%;
  font-size:95%;
 }
 
 .mainHeader img{
  width: 100%;
 }

 .mainHeader nav{
  height:160px;
 }
 
 .mainHeader nav ul{
  float:left;
 }

 .mainHeader nav ul li{
  width: 100%;
  text-align:center;
 }

 .mainHeader nav a:link, .mainHeader nav a:visited {
  padding: 10px 25px;
  height:20px;
  display: block;
 }
}
<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="utf-8"/>
 <title>Momobear</title>
 <link rel="stylesheet" href="style.css">
 <link rel="stylesheet" href="responsive.css">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <!-- Add jQuery library -->
 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
 <!-- Add fancyBox -->
 <link rel="stylesheet" href="source/jquery.fancybox.css?" type="text/css" media="screen" />
 <script type="text/javascript" src="source/jquery.fancybox.pack.js"></script>
 <!-- Separate CSS File -->

</head>
<body class="body">
 <header id="mainHeader" class="mainHeader">
  <img src="pics\art1.jpg">
 
  <nav id="navBar">
   <ul>
    <li><a href="index.html">WELCOME</a></li>
    <li><a href="contact.html">CONTACT</a></li>
    <li><a class="active" href="artwork.html">ART WORK</a></li>
    <li><a href="blog.html">BLOG</a></li>
    <li><a href="resources.html">RESOURCES</a></li>
    <li><a href="about.html">ABOUT</a></li>
    <li><a href="shop.html">SHOP</a></li>
   </ul>
  </nav>
 </header>
 <hr/>
 
 <div id="artWorkSection">
  
  <nav id="bottomNavBar" class="artworkBottomNav">
   <ul>
    <li><a class="active" href="artwork.html">ART WORK</a></li>
    <li><a href="geometry.html">GEOMETRY</a></li>
    <li><a href="illumination.html">ILLUMINTION</a></li>
    <li><a href="islimi.html">ISLIMI</a></li>
   <ul>
  </nav>
  
  <section id="section1">
   <div id="artworkArticlesLeft">
    <article id="artworkArticle1">
     <header>
      <h1>Art Work</h1>
     </header>
     <p>Welcome to the main gallery, Welcome to the main gallery, which showcases my completeWelcome to the main gallery, which showcases my completeWelcome to the main gallery, which showcases my completeWelcome to the main gallery, which showcases my completeWelcome to the main gallery, which showcases my completewhich showcases my complete</p>

    </article>
   </div>
   <div id="artworkArticlesRight">
    <div class="verticalLine">
     <article id="artworkArticle2">
      <p>Welcome to the main gallery, which showcaWelcome to the main gallery, which showcases my completeWelcome to the main gallery, which showcases my completeWelcome to the main gallery, which showcases my completeses my completed work.  </p>
      </br>
      <p>Please get in touch via the c</p>
     </article>
    </div>
   </div>
  </section>
 </div>


 <div class="gallery">
  <a class="fancybox" rel="group" href="pics\art1.jpg">
   <img src="pics\art1.jpg" width="400" height="300" ></a>
  <a class="fancybox" rel="group" href="pics\art2.jpg">
   <img src="pics\art2.jpg" width="400" height="300" ></a>
  <a class="fancybox" rel="group" href="pics\art3.jpg">
   <img src="pics\art3.jpg" width="400" height="300" ></a>
  <a class="fancybox" rel="group" href="pics\art4.jpg">
   <img src="pics\art4.jpg" width="400" height="300" ></a>
  <a class="fancybox" rel="group" href="pics\art1.jpg">
   <img src="pics\art1.jpg" width="400" height="300" ></a>
  <a class="fancybox" rel="group" href="pics\art2.jpg">
   <img src="pics\art2.jpg" width="400" height="300" ></a>
  <a class="fancybox" rel="group" href="pics\art3.jpg">
   <img src="pics\art3.jpg" width="400" height="300" ></a>
  <a class="fancybox" rel="group" href="pics\art4.jpg">
   <img src="pics\art4.jpg" width="400" height="300" ></a>
  <a class="fancybox" rel="group" href="pics\art4.jpg">
   <img src="pics\art4.jpg" width="400" height="300" ></a>
 </div>

<script type="text/javascript">
$(document).ready(function() {
 $(".fancybox").fancybox();
});
 
</script>
</body>
</html>
Mohamed
  • 75
  • 8

0 Answers0