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![](https://ecs-static.teamtreehouse.com/assets/views/marketing/shared/community-banner-white-47072046c51352fe6a69f5e691ff5700b28bb11d45197d7bdf066d9ea3f72d0c.webp)
![Farouk Charkas](https://uploads.teamtreehouse.com/production/profile-photos/4050072/micro_IMG_4648.jpg)
Farouk Charkas
1,957 PointsHow 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](https://secure.gravatar.com/avatar/a11e5ce3fab1e2caefaaa93fbab0c671?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
Zeshan Ahmed
13,151 PointsHi 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:
- You've added margin to your body tag (screenshot). Instead, you should use
max-width
orwidth
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;
}
- 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!
Farouk Charkas
1,957 PointsFarouk Charkas
1,957 PointsThank you Zeshan!