Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Lee Cockcroft
Lee Cockcroft
5,147 Points

Responsive design

Hi All,

Could someone please help me with responsive design.

I understand how it works, units as em or % instead of px etc, and im aware how media queries work.

I just need some advise on how you layout it all out I take the "Mobile-first" approach, and then adjust accordingly with media queries.

However, the problem occurs after the first media query, as some divs have positions, margins etc attached. Therefore when I correct them. by the time I get to Desktop its all over the place.

So, I end up with elements away from their parent div due to positioning!

Just need some advise on what approach you take.

Thanks

2 Answers

Cory Harkins
Cory Harkins
16,500 Points
Cory Harkins
Cory Harkins
16,500 Points

It seems as though you would prefer a why instead of the how.

Good practice demonstrates a mock-up of elements/styles on pencil and paper, or Adobe, or MS paint...

Think through it. Then get the HTML basics down of what you need. For instance. If you have a header/nav bar/content/etc. ... How many <div> elements do you need?

Before doing any kind of major styling, I've resolved to do boxes now. Just as a test.

in HTML:

<body>
  <div id="parent_a">
    <div id="child_a1"></div>
    <div id="child_a2"></div>
  </div>
  <div id="parent_b">
    <div id="child_b1"></div>
    <div id="child_b2"></div>
  </div>
</body>

then I take those div's and CSS the MESS out of them:

#parent_a {
  border: 2px solid red;
  /*apply sizing & positioning as you see fit*/
}
#child_a1 {
  border: 2px solid green;
  /*apply sizing & positioning as you see fit*/
}
#child_a2 {
  border: 2px solid blue;
  /*apply sizing & positioning as you see fit*/
}
#parent_b {
  border: 2px solid red;
  /*apply sizing & positioning as you see fit*/
}
#child_b1 {
  border: 2px solid green;
  /*apply sizing & positioning as you see fit*/
}
#child_b2 {
  border: 2px solid blue;
  /*apply sizing & positioning as you see fit*/
}

I often get ahead of myself with design, as I want to flesh it out, details first; however, playing with boxes and setting them up, you can re-use that code as "snippets" HTML and CSS for future projects. Experimenting with these elements in a safe environment can be very therapeutic and is the best way to learn.

I hope I answered your question, if not, I can wear my dummy shirt for the rest of the day. lol.

Lee Cockcroft
Lee Cockcroft
5,147 Points
Lee Cockcroft
Lee Cockcroft
5,147 Points

Thank you for you reply.

Yes I have got ahead of my self, and your response does make sense. I have a psd with the sizes fonts etc, however, with responsive design the actual size doesn't really match, so im going on my opinion and trying to copy the page as close as possible.

Now going back to designing the layout first. Looking at my code (which i have now got myself in to a mess)

http://codepen.io/leecocky/pen/qmOBGz?editors=1100

Would it be a better approach to just style fonts,color, borders first, then set 3 media queries, for a guide mobile,tablet,desktop, and each of these having the proprieties, positions,margins,paddings,width,height and size? therefore when i create my tablet mode all sections will only have color and font,with no position or margins.Would that be the best approach and practice? for example the link i've attached, you can see ive made a border around 1 div, but the child elements are above the parent as it has a position relative with top -1.3em.

Im at the point where I need someone to just point out the most obvious mistake im making, as its just the layout im struggling with.

PS sorry the code isn't as readable as it should, this is just me improving on css

Thanks for your help