Centering long horizontal image on responsive site (w/ link)

Question

Thanks for your time. I'm a designer trying to get into coding but it's so frustrating sigh haha.

I am trying to create a responsive webpage, so I created a very long graphic, with the main info in the middle. I am trying to center this graphic so that no matter how big/wide the browser window, it still has the middle of graphic showing.

    <div class= "container">
    <div id="main">
    <img src="maingreenlong.png"/>
    </div>
    </div>

   #main {}

   .container
   {
  position: relative;
  width: 100%;
  overflow: hidden;
  }

I have a div.container that has div.main wrapped because I saw it on another question but it didn't work :(

That may have made no sense; pls visit my site http://www.jhydesigns.com (scroll to the right) and you will be able to see exactly what I am trying to do. The long image i created only made my site really long....maybe this is whole another issue sigh lol.

Thanks in advance everyone!

Answer 1

This site is not responsive at all. You might want to take a look at some tutorials, learn about:

• fluid design
• meta viewport tag (for touch devices)
• html5
• responsive design (mobile first and desktop first and why)
• respond.js if you plan on supporting IE8
• basic jquery
• positioning, floats, displays and all css fundamentals
• responsive images
• background size options
• box-sizing
• retina images
• accessibility

And the list goes on...

This is mobile first CSS. You put the SHARED, GLOBAL styles outside the media queries and you put the styles that are on larger viewports in the min-widths. You choose the min-width based on your design so that it's fluid and the inbetween sizes (since devices come in many, many sizes it will look good.

You will need to learn how to toggle the navigation if you plan on using a hamburger (three lines) or try your best and post a new SO question.

DEMO: https://jsbin.com/siyawe/1/

CSS

body,
html {
    margin: 0;
    padding: 0;
    background: #fff;
    font: 1em/1.8 sans-serif;
}
*,
*:before,
*:after {
    box-sizing: border-box
}
.featurette {
    width: 100%;
    clear: both;
    height: 0;
    padding-top: 40%;
    background: url(http://www.jhydesigns.com/maingreenlong.png);
    background-size: cover;
    background-position: 50% 50%;
}
.header {
    text-align: center
}
.header .nav ul {
    margin: 0;
    padding: 3% 0 0 0;
    position: relative;
    list-style: none;
    clear: both;
}
.header .nav a {
    text-decoration: none;
    padding: 10px;
    color: #000;
    display: block;
}
.header {
    padding: 3% 5% 0;
    position: relative;
}
.header img {
    max-width: 150px;
    width: 100%;
    display: block;
    margin: 0 auto 5%;
}
@media (min-width:400px) { 
    .header .logo {
        float: left
    }
    .header .social {
        float: right
    }
    .header .nav li {
        display: inline-block
    }
    .header img {
        margin: 0
    }
}
@media (min-width:600px) { 
    .header {
        display: table;
        width: 100%;
        padding: 3% 5%;
    }
    .header .logo,
    .header .social {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
        float: none;
    }
    .header .social {
        text-align: right
    }
    .header .nav {
        position: absolute;
        bottom: -50px;
        left: 5%;
    }
    .header .nav a {
        color: #fff;
        display: inline-block;
        padding: 5px 10px;
    }
    .header .nav ul {
        left: -10px;
        padding: 0;
    }
    .header .nav li {
        display: inline-block
    }
    .featurette {
        padding-top: 30%
    }
}
.footer {
    clear: both;
    background: #000;
    color: #ddd;
    padding: 3% 5%;
    text-align: center;
}
@media (min-width:400px) { 
    .footer {
        text-align: right
    }
  
}

@media (min-width:1000px) { 
    .featurette {
        padding-top: 20%
    }
}  

HTML

  <header class="header">
     <a href="#" class="logo"><img src="http://www.jhydesigns.com/Logo.png" alt="" /></a>
     <div class="social">
        X X stuff
     </div>
     <nav class="nav">
        <ul role="navigation" role="navigation">
           <li><a href="#">Link</a></li>
           <li><a href="#">Link</a></li>
           <li><a href="#">Link</a></li>
           <li><a href="#">Link</a></li>
           <li><a href="#">Link</a></li>
        </ul>
     </nav>
  </header>
  <div class="featurette" ><!-- background image --></div>
  <footer class="footer">footer</footer>