1

I coded in main.css and I checked in the browser it was perfectly fine. I created another file named responsive.css the logo hasn't moved at all and the rest like images, wrapper too the same when I resized the browser. I have moved responsive above main link. But it still the same.

@charset "utf-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Vidaloka|Philosopher);

* {
 box-sizing : border-box;
}

#wrapper {
 max-width: 940px;
  margin: 0 auto;
  padding: 0;
 }

.sectionPage {
 width: 100%;
 height: 100vh;
}


/* ==========================================================================
   BACKGROUND
   ========================================================================== */
#home,
#skills,
#contact {
 background-color: #000000;
background-image: url(http://www.transparenttextures.com/patterns/subtle-dots.png);
}

#about,
#work,
#services {
 background-color: #fcfcfc;
background-image: url(http://www.transparenttextures.com/patterns/skulls.png);
}

/* ==========================================================================
   FOR TITLE OF ALL SECTION PAGE
   ========================================================================== */


h1 {
 text-align: center;
 font-size: 30px;
 font-family: 'Vidaloka', serif;
}


/* ==========================================================================
   HOME
   ========================================================================== */
p {
 font-family: 'Philosopher', sans-serif;
}

#home > img {
 text-align: center;
 margin-top: 5em;
 margin-left: 44.5%;
}

#home > h1 {
 color: #ffffff;
 margin-top: 2em;
 margin-bottom: 2em;
 font-size: 2em;
}

#home > a {
 font-size: 16px;
 font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
 text-decoration: none;
 color: #ffffff;
 border-radius: 25px;
 background-color: #1199C3;
 padding: 10px;
 text-align: center;
 margin-left: 45%;
}

#home > a:hover {
 color: #000000;
 background-color: #0B637E;
}


/* ==========================================================================
   ABOUT
   ========================================================================== */

#about > h1 {
 color: #1199C3;
 top: 8%;
 position: relative;
}


.wrapper > img {
 background-size: cover;
 background-repeat: no-repeat;
 border: 5px;
 border-radius: 50%;
 border-color: #ffffff;
 border-style: solid;
 width: 120px;
 height: 140px;
 margin-top: 1%;
 margin-bottom: 0;
}

.wrapper {
  margin: 10px auto;
  text-align: center;
  background-color: #1199C3;
  padding-bottom: 0.1%;
  padding-top: 2%;
  width: 25%;
  border-radius: 3%;
  position: relative;
  top: 6%;
}

.wrapper > p {
 font-size: 20px;
 color: #ffffff;
}

#about > p {
 text-align: center;
 font-size:18px;
 margin-left: 2em;
 margin-right: 2em;
 position: relative;
 top: 5%;
 }

#about > a {
 font-size: 16px;
 background-color: #1199C3;
 border-radius: 5px;
 color: #ffffff;
 text-decoration: none;
 padding: 1%;
 margin-left: 41%;
 font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#about > a:hover {
 color: #1199C3;
 background-color: #0B637E;
}

#about > a {
 position: absolute;
 top: 198%;
 left: 0em;
}


/* ==========================================================================
   SKILLS
   ========================================================================== */

#skills > h1 {
 color: #1199C3;
 font-size:2.5em;
 padding-top: 5%;
}

#skills > p {
 text-align: center;
 color: #ffffff;
 font-size: 28px;
 line-height: 0%;
 padding: 5%;
}

.gallery > img, {
 text-align: center;
 margin-top: 3em;
 margin-right: 0;
}

.gallery > li {
 display: inline;
 list-style: none;
}

.gallery {
 left: 28%;
 position: relative;
}

.software > img {
 text-align: center;
 margin-top: 3em;
 margin-right: 0;
}

.software > li {
 display: inline;
 list-style: none;
}

.software {
 left: 33%;
 position: relative;
}

/* ==========================================================================
   WORK
   ========================================================================== */

#work > h1 {
 color: #1199C3;
 font-size:2.5em;
 padding-top: 5%;
}

#work > p{
 text-align: center;
 font-size:18px;
 padding-top: 5%;
 margin-left: 2em;
 margin-right: 2em;
 }
 
#work > a {
 background-color: #1199C3;
 border-radius: 5px;
 color: #ffffff;
 text-decoration: none;
 padding: 1%;
 margin-left: 40%;
 margin-top: 6em;
 font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#work > a:hover {
 color: #1199C3;
 background-color: #0B637E;
}

.tweet, .msg {
 text-decoration: none;
 color: #1199C3;
}

 
/* ==========================================================================
   SERVICES
   ========================================================================== */

#services > h1 {
 color: #1199C3;
 font-size:2.5em;
 padding-top: 5%;
}

#services > img {
 text-align: center;
 padding-top: 3%;
 padding-left: 2%;
 padding-right: 2%;
 margin-left: 15%;
 width: 70%;
 height: auto;
}

#services > p{
 text-align: center;
 font-size:18px;
 padding-top: 2%;
 margin-left: 2em;
 margin-right: 2em;
 }

/* ==========================================================================
   CONTACT
========================================================================== */
 
#contact > h1{
 color: #1199C3;
 font-size:2.5em;
 padding-top: 3%;
 position: relative;;
 top: 3%;
}

#contact > p {
 text-align: center;
 font-size:18px;
 padding: 1%;
 color: #ffffff;
 line-height: 2px;
 
}

.container{
 width: 50%;
 height: 50%;
 padding: 2%;
 margin-top: 1em;
 margin-left: 25%;
 background-color: #0B637E;
 border-radius: 5px;
}

#name, #email, #bio{
 border-radius: 5px;
 border-style: solid;
 border-color: #1199C3;
 width: 100%;
 padding: 2%;
 margin-top: 1em;
 font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#bio {
 height: 140px;
}

#name, #email, #bio {
 font-size: 14px;
 color: #000000;
}

#button {
 position: relative;
 top:5px;
 border-radius: 3px;
 border-color: #1199C3;
 border-style: solid;
 background-color: #FFFFFF;
 color: #000000;
 padding: 5px;
 float: right;
}
 
#contact > ul {
 margin-left: 25%;
}
#contact > ul > li {
 list-style: none;
 display: inline-block;
 margin-left: 5%;
}

#contact > ul > li > a {
 color: #ffffff;
 text-decoration: none;
}

#contact > ul > li > a:hover {
 color: #1199C3;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

footer {
 background-color: #1199C3;
 position: relative;
 bottom: 0%;
}

footer > ul {
 padding-left: 8%;
 padding-top: 1%;
 margin-left: 27%;
}

footer > ul > li {
 list-style: none;
 display: inline-block;
 padding-left: 1%;
 padding-top: 1%;
 font-size: 12px;
 text-align: center;
}

footer > ul > li > a {
 text-decoration: none;
 color: #ffffff;
 margin-left: 0;
}

footer > ul > li > a:hover {
 color: #000000;
}

footer > p {
 color: #ffffff;
 text-align:center;
 padding-bottom: 2%;
 position: relative;
 bottom: 8%;
}
<!doctype html>
<html>
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alzira Barretto</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/responsivemobilemenu.css">
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<link rel="stylesheet" type="text/css" href="css/main.css">

<link href="http://fonts.googleapis.com/css?family=Vidaloka|Philosopher" rel="stylesheet" type="text/css">
</head>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/responsivemobilemenu.js"></script>



<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Vidaloka::latin', 'Philosopher' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); 
  </script>




<!-- MAIN MENU-->

<body>
  <div class="rmm">
  <ul>
 <li><a href="#home" data-target="home">HOME</a></li>
 <li><a href="#about" data-target="about">ABOUT ME</a></li>
  <li><a href="#skills" data-target="skills">MY SKILLS</a></li>
 <li><a href="#work" data-target="work">MY WORK</a></li>
 <li><a href="#services" data-target="services">SERVICES</a></li>
  <li><a href="#contact" data-target="contact">CONTACT ME</a></li>
  <li><a href="blog.html">BLOG</a></li>
</ul>
</div>



<div id="wrapper">
<div class="sectionPage" id="home">

<img src="img/ab-logo.svg" alt="ab logo">
<h1>DESIGN &amp; CODE</h1>
<a class="welcome" href="#about">WELCOME</a>
</div>




<!-- ABOUT ME -->


<div class="sectionPage" id="about">
<h1>A LITTLE NOTE ABOUT ME</h1>
<div class="wrapper">
<img src="img/alzira.jpg" alt="">
<p><strong>ALZIRA BARRETTO<br>MUMBAI, INDIA<br>FRONT-END DEVELOPER<br></strong></p>
</div>
<p>I was raised in Mumbai, India. Ever since I was a child I learnt
from my dad how to draw. What attract me the most is an amazing colors and 
shapes. From the basic foundations, I've studied a lot about Graphic 
Designing and joined in 3 years of fine arts. When comes to
web designing, I've learnt some of the courses in Treehouse since
2014. I'm keen to learn more about new languages. I have build
one website of my own and still in processing. I work hard to complete my project. I couldnt resist my finger from coding.</p>
<p>Apart from web designing, I love to draw, stitching, craft (DIY),
and obvious love to travel and explore new places.</p>
<p>Thanks for stopping by!!!</p>
<a href="img/Resume.pdf">DOWNLOAD MY CV</a>
</div>



<!-- MY SKILLS -->


<div class="sectionPage" id="skills">
<h1>MY SKILLS</h1>
<p>CODE I USE</p>
<ul class="gallery">
 <li><img src="img/HTML.svg" alt="html" width="100" height="100"></li>
 <li><img src="img/CSS.svg" alt="css" width="100" height="100"></li>
 <li><img src="img/JSCRIPT.svg" alt="js" width="100" height="100"></li>
</ul>
<p>SOFTWARE I USE</p>
<ul class="software">
 <li><img src="img/photoshop.svg" alt="ps" width="100" height="100"></li>
    <li><img src="img/Illustrator.svg" alt="ai" width="100" height="100"></li>
    </ul>
</div>




<!-- MY WORK -->

<div class="sectionPage" id="work">
<h1>MY WORK</h1>
<p> It's just the beginning to build my portfolio and not just a professional one but to enhance my skills and gain more knowledges. I really do love my job and do what I love. I'm still learning new languages like Ruby, Drupal, Php, Javascript and of course Android apps. I would be appreciate if you really love my work and hire me to working with you. Please don't hesitate to <a class="msg" href="#contact">contact me</a> or tweet me <a class="tweet" href="http://www.twitter.com/@Albardesign">@Albardesign</a></p>
<p>I have a creative mind and I'd love to post it to show off my work. I am working on complete study cases.</p>
<a class="portfolio" href="https://www.behance.net/Alzira25">CHECK MY PORTFOLIO</a>
</div>


<!-- SERVICES -->
<div class="sectionPage" id="services">
<h1>SERVICES</h1>
<img src="img/devices.svg" alt="devices" width="500px" height="500px">
<p>As new technology increase, we build the website in Responsive style. Range from the biggest size of the Computer to the Tablet and goes to the smallest size of mobile devices. Mobile devices is the most popular used by people. We transform the website into the rich look.</p>
<p><strong><font size="+2" color="#1199C3">BUILD. REDESIGN. LAUNCH</font></strong></p>
<p><font size="+4" color="#1199C3"><em>VOILA!</em></font></p>
</div> 


<!-- CONTACT -->

<div class="sectionPage" id="contact">
<h1>CONTACT ME</h1>
<p>Love to hear from you</p>
<p>Please feel free to drop the messages</p>

<div class="container">
<form id="form" action="send_form.php" method="post">

 <input type="text" id="name" name="user_name" placeholder="Your Name"/>
 <input type="email" id="email" name="user_email" placeholder="Your Email"/>
 <textarea id="bio"  name="user_message" placeholder="Write the message"></textarea>
 <button id="button" type="submit">SEND</button>

</form>
</div>
<ul>
 <li><img src="img/twitter.svg" alt="tweet" width="40" height="40"><a href="http://www.twitter.com/@Albardesign">FOLLOW ME</a></li>
 <li><img src="img/mail.svg" alt="mail" width="40" height="40"><a href="mailto:alzirabarretto@gmail.com?Subject=Hello%20again" target="_top">MAIL ME</a></li>
</ul>

<!-- FOOTER -->
<footer>
<ul>
 <li><a href="#home">HOME</a></li>
    <li><a href="#about">ABOUT</a></li>
    <li><a href="#work">WORK</a></li>
    <li><a href="#contact">CONTACT</a></li>
    <li><a href="#blog">BLOGS</a></li>
</ul>
<p>ALZIRA BARRETTO|2015</p>
</footer>
</div>
</body>
</html>
Alzira Barretto
  • 153
  • 1
  • 9
  • 1
    Some CSS in main.css might be overriding duplicate elements in responsive, try moving responsive.css above main.css in HTML. – nextstep Sep 15 '15 at 15:17
  • Use the device mode in Chrome to see what CSS each element is using. That should give you a clue. – Tony Tambe Sep 15 '15 at 15:23
  • See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) – Paulie_D Sep 15 '15 at 15:24
  • Could you please elaborate on _it doesn't move at all and in main.css everything is changes_. I feel like the question being asked is still ambiguous. I have setup a [jsfiddle](http://jsfiddle.net/6kte91ch/) with the exact code you posted and it works correctly. By that I mean, once the viewport is less than 480px the max-width rule no longer applies. – Andrew Sep 15 '15 at 16:18
  • I have posted the full code and haven't add responsive code. See if it works from your side when you code in responsive. Let me know what went wrong? – Alzira Barretto Sep 16 '15 at 05:07
  • 1
    We can't debug media-queries if they are not in the provided code... You could be doing something incorrectly. We need to know what you are attempting. – Derek Story Sep 16 '15 at 05:11
  • my website is www.alzirabarretto.com/webdesigner. See if you can see the code. Im trying to do responsive code but I had no clue why it's not working? – Alzira Barretto Sep 16 '15 at 05:13
  • @nextstep CSS _cascades_ (hence the name Cascading Style Sheet). Moving the responsive css above the main CSS file would have the **opposite** effect; if the rules have the same weight, you'd want responsive.css to be included **after** main.css. If they have a higher weight, the order of inclusion makes no difference. – Christian Sep 16 '15 at 05:13
  • @AlziraBarretto You need to provide relevant code (not link to it) on SO. – Derek Story Sep 16 '15 at 05:14
  • @media screen and (max-width: 480px) { #home > img { max-width: 100%; } .wrapper > img { border-radius: 50%; width: 50px; height: 70px; margin-top: 1%; margin-bottom: 0; } .wrapper { margin: 10px auto; text-align: center; background-color: #1199C3; padding-bottom: 0.1%; padding-top: 2%; width: 10%; border-radius: 3%; position: relative; top: 6%; } } – Alzira Barretto Sep 16 '15 at 05:23
  • @Andrew the logo is not moving to the center when resizing the browser. – Alzira Barretto Sep 16 '15 at 05:30
  • I got it. It's working now thanks for your quick help. – Alzira Barretto Sep 16 '15 at 05:52
  • @AlziraBarretto If I understand correctly you were asking "How can I center an image when the width of an element is above a specific pixel size?". Originally you were using text-align:center which will not work when assigned to the image element iteself (since it only applies to block containers ([question #7055393](http://stackoverflow.com/questions/7055393/center-image-using-text-align-center)). I assume you utilized a solution similar to the "reference question", but **could you post your solution?** – Andrew Sep 16 '15 at 18:16

0 Answers0