3 comments

1. Last year in April they released a newer updated version of the flex property, this works in most browsers, and down to IE10. It is like displaying things inline-block, but it interpolates widths, and allows a heightened flexibility to any responsive inline elements

   here is a full description of its capabilities.
   http://css-tricks.com/snippets/css/a-guide-to-flexbox/

   check out this fiddle

   http://jsfiddle.net/yznby99f/3/

   essentially you will put these display properties on the parent of whatever it is you want to see displayed inline.

   display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
   display: -ms-flexbox;/* TWEENER - IE 10 */
   display: -webkit-flex;/* NEW - Chrome */
   display: -moz-box; /* MOZILLA */
   display: flex; /* standard syntax */
   

   Log in to Reply

2. I bet you have something like this

   LOGOMenu

   floated left

   can you try

   #logo{
       width:40%;
       background:green;    
       height:20px;
       float:left;
   }
   #menu{
       min-width:60%;
       background:blue;    
       height:20px;
       display:inline-block;
   }
   

   See if results…

   Log in to Reply

3. Using the previous fiddle example, I added a small snippet of code to solve your problem!

   http://jsfiddle.net/yznby99f/4/

   A huge key in responsive web design was available for use when CSS3 was released. that is what is called a media query.

   @media all and (max-width: 699px){
   
       /*  Put any styles here   */
   
   }
   

   http://www.w3schools.com/css/css_mediatypes.asp

   this means that when the screen size is below 699px it will execute any styles within their constraints.

   It is important in responsive design to add a “viewport tag” to the of your document. this allows the browser to read and the device width of your user IE: tablet, and smartphone:

   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
   

   https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

   You can also set when styles happen between a 2 pixel widths:

   @media all and (max-width: 699px) and (min-width: 500px){
   
       /*  Put any styles here   */
   
   }
   

   To test the responsiveness in the fiddle drag the right hand side of you browser to the left to shrink the width

   Log in to Reply