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

Business

Farouk Charkas
Farouk Charkas
1,957 Points

How do I make my website mobile friendly?

How do I make my website mobile friendly? My website is http://www.one-eight-nine.ga

1 Answer

Zeshan Ahmed
Zeshan Ahmed
13,151 Points

Hi Farouk,

First, this answer doesn't seem to fit inside "Business" topic. Secondly, I've gone through your site, it seems to be responsive but there are a few things that are breaking its mobile layout. I'll point them out below:

  1. You've added margin to your body tag (screenshot). Instead, you should use max-width or width in percentage properties if you want to add spacing around your body. For example:
body {
    max-width: 1100px; /* Optional, can remove or adjust its width */
    width: 90%;
    /* following CSS is to horizontally center the element */
    margin-left: auto; 
    margin-right: auto; 
}
  1. Remove padding-left from ul tag that contains all your facts (screenshot). Looks like you have giving an ID to it, so your code to remove padding-left could be something like this:
ul#list-all-the-facts-given {
    padding-left: 0;
}

Other than that, you can use CSS3 media queries to target elements on different screen sizes and adjust their styling.

Thanks!