Responsive design

Get Started
1

Hi,

I was messing about today with using @media queries to do silly things like resizing divs/sections and position them differently, hide/show elements etc - just to get a basic understanding of how responsiveness works. Think it will be actually quite fun developing this way…

A couple of questions though…

If i have a website that has a 960px container, and say for example 2 sections inside that i want to sit as a left column and a right column, obviously its easy to say width: 480px on each and float left and right… but is there a way to have say

#blockone { width: 50%; float: left; }

and have the 50% only expand 50% the width of its parent (ie the container) ? it seems to go 50% of the browser.

I think working with percentages in this way would be much easier in responsive design than doing everything by the pixel…

Also: I had a basic 2 column website, the colums sat side by side as the example above then when the browser window is resized, the second column drops beneath the first, and they both stretch to the width (480px) so that they are now rows instead of colums…

i did this with @media and screen (max-width: 480px) {}

Im just wondering when designing responsively, what are the actual resolutions (px) to use as max-width for say the iPhone, and would obviously have different rules for ipad?

2

There must be an error in your code, then, as width: 50% means 50% of the parent container.

Im just wondering when designing responsively, what are the actual resolutions (px) to use as max-width for say the iPhone, and would obviously have different rules for ipad?

Here’s a handy guide:

3

Yeah just tried it again and the 50% was working correctly, not sure what id done wrong. Thanks for the guide will check it out now :slight_smile:

4

One more little question… I have just built a responsive template… the bottom section contains 4 articles which are 25% width… how can i add padding to these, without it breaking the layout?

5

Either reduce the width of each and add padding as a %, or add a widthless inner div to each with its own padding.