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

James Ingmire
James Ingmire
11,901 Points
Posted by James Ingmire
James Ingmire
11,901 Points

Can someone check this website out and give me a clue of how to make the pages responsive?

Media queries/Responsive design.. Trying to make this site responsive for a friend, however images and text overlap each other on most pages when resized. Is there a simple way of setting a rule or media query in order for them to take up their assigned space e.g.50% and stay at 50%. Any help will be much appreciated. Thank you!

www.platesrecords.co.uk

4 Answers

Justin Budd
Justin Budd
12,210 Points

Try Floating your div's in your media query and check your margin's this is how i did my header on my page

nav { background:none; float:right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; }

#logo { float:left; margin-left: 5%; text-align: Left; width: 45%; }

I would try to float your picture on the left to the left and your picture on the right to the right and the middle nav bar should fall into place in the middle you can also look into making max-width: 50% and that will make it only resize to 50% of your div size if you want it to stay at 50% you would need to determine what the pixel diminesions would be for 50% of the image size and right that in as width (width: XXpx;) and you may have to set the height (height: XXpx;) replace the capital X's with numbers.

Boris Kamp
Boris Kamp
16,660 Points
Boris Kamp
Boris Kamp
16,660 Points

I recently started working with bootstrap framework, it's easy to implement in your existing site and by adding predefined classes you can create great responsiveness! look into Bootstrap or another framework and you'll be amazed

James Ingmire
James Ingmire
11,901 Points
James Ingmire
James Ingmire
11,901 Points

Thanks for all your replys. After a while of playing around and doing what Justin said I managed to sort most things out. I rushed into the site and didn't think ahead planning a design to be begin with, next time will either think more or use a framework.