How To Create A Responsive Theme From Scratch

This looks like a nice tutorial:

Developing WordPress Themes Using Responsive Frameworks

No need to go there, just do this https://underscores.me/ instead!

Simple yet very effective:
HTML

<div id="wrapper">
   <div id="header">
      <h1>Your Site Title</h1>
   </div><!-- end header -->
   <div id="main">
      <div id="content">
         <h2>Your Content Title</h2>
         <p>Your content blah blah...</p>
      </div><!-- end header -->
      <div id="sidebar">
         <p>Your sidebar content...</p>
      </div><!-- end sidebar -->
   </div><!-- end main -->
   <div id="footer">
      <p>Your footer content...</p>
   </div><!-- end footer -->
</div><!-- end wrapper -->

CSS

#wrapper {
   max-width: 1200px;
   width: 95%;
   margin: 0 auto;
}

#header, #main, #footer {
   width: 100%;
}

#content {
   width: 65%;
   float: left;
}

#sidebar {
   width: 35%;
   float: left;
}

#footer {
   clear: both;
}

The main thing here is to use the “max-width” and “width” on the wrapper (or whatever did you have wrapping the content).

I’m using this style of coding on my website:
[Signature removed]

@decentguy49
Have you found a good reference yet? I’m starting to look around at responsive designs & there is loads of material around for general sites and I suspect most of the principles can be implemented/applied to a WordPress theme.

@dbeja
Thanks for the link

@bigmike828 aka @bestwpdesigner
Surely you mean HTML5 ?!…..

Your site doesn’t have to use HTML5 tags to be responsive.

Underscores theme is a good way to start your own theme. But if you want to make your existing theme responsive then you have to make changes to the stylesheet so that the elements responds as per the devide width.

I want to use my exisiting theme responsive. Any idea for good tutorials?

What is for underscrore.me Emil Uzelac