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 Tushar Saraf
Tushar Saraf
7,101 Points

Fix unwanted horizontal scrolling on mobile view

<!DOCTYPE html> <html> <head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Tushar Saraf | Developer</title>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<link rel="stylesheet" href="main.css">

</head> <body>

<div class="home_page">
  <div class="welcome_text">
    <h1>Hi, I'm Tushar. I build websites that grab <br>people's attention!</h1><br>
    <a href="#">GET IN TOUCH</a>
  </div>
  <div class="scroll">
    <p>Learn More</p>
    <i class="fa fa-angle-down" aria-hidden="true"></i>
  </div>
</div>

<div id="expertise">
  <h1>My Expertise</h1>

  <div class="ideas">
    <i class="fa fa-diamond" aria-hidden="true"></i>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
      nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>

  <div class="simplicity">
    <i class="fa fa-check" aria-hidden="true"></i>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
      nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>

  <div class="coding">
    <i class="fa fa-code" aria-hidden="true"></i>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
      nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>

  <div class="responsive">
    <i class="fa fa-mobile" aria-hidden="true"></i>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
      nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>

  <div class="seo">
    <i class="fa fa-search" aria-hidden="true"></i>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
      nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>

  <div class="maintain">
    <i class="fa fa-wrench" aria-hidden="true"></i>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
      nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>

</div>

<div id="my_work">
  <h1>MY WORK</h1>

  <div class="sphynx_media">
    <img src="images/sphynx_media.jpg" alt="Sphynx Media">
    <span>Sphynx Media</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
    <a href="https://www.sphynxmedia.com" target="_blank">Visit Website</a>
    <hr>
    <blockquote>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua.
    </blockquote>
  </div>

  <div class="keystone_paint">
    <img src="images/keystone_paint.jpg" alt="Keystone Paint and Trim">
    <span>Keystone Paint and Trim</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
    <a href="https://www.keystonepaintandtrim.com" target="_blank">Visit Website</a>
    <hr>
    <blockquote>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua.
    </blockquote>
  </div>

</div>

<div id="about_me">
  <p>I make websites that grab people's attention!
    <br><br>
    In the world of the internet, dominated by social media and potentially billions of websites,
    the costliest thing you could ask of your prospect is for their attention.
    <br><br>
    Research shows that the average adult attention span is around 8 seconds which is shorter than that of a goldfish.
    The bad news is that you literally have seconds to make a first impression count. This may sound depressing,
    but it doesn't have to be.  It can be rewarding, if you know the tricks of the trade that grab people's attention.
    <br><br>
    This is where I come in. I make the client side experience smooth. With a minimalistic approach
    I make sure the user sitting on the other side doesn't have to scratch his head to navigate through your website.
    <br><br>
    Hi, I'm Tushar Saraf. Today, everybody knows the internet is the best place to be for business
    regardless of what you're selling. However, I have seen a large gap in technical knowledge between
    developers and their not so technically savvy counterparts.
    <br><br>
    That's why most clients have no idea what technologies are currently being used or what they
    are actually paying for.
    <br><br>
    For this, I have adopted a simple motto.
    <br><br>
    I won't use any technical word that you, as my client, are clueless of. Everything that you
    need to know will be communicated in a simple language.
    <br><br>
    The cost of the project will be broken down into simple and easy to understand chunks. This way you'll
    know exactly what you are paying for.</p>
    <br>
    <a href="https://www.upwork.com/freelancers/~015a7c470888c6224a">Let's Work Together</a>
</div>

<footer>
  <p>Handmade By Me</p>
  <p>Copyright (c) 2017 Tushar Saraf All Rights Reserved.</p>
</footer>

<script src="main.js" charset="utf-8"></script>

</body> </html>

body { padding: 0; margin: 0; font-family: 'Roboto', sans-serif; }

  • { box-sizing: border-box; }

/============================= HOME PAGE =============================/

.home_page { background-color: #2A3A3F; background-image: url(images/main_image.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed; height: 100vh; text-align: center; position: relative; }

.welcome_text { margin-top: 30vh; display: inline-block; color: #eee; }

.welcome_text h1 { line-height: 1.3em; }

.scroll { text-align: center; position: absolute; bottom: 1.5em; left: 40%; color: #eee; }

.scroll .fa { font-size: 2em; }

a { border: 2px solid yellow; text-decoration: none; font-size: 1.5em; padding: 0.4em 1.3em; border-radius: 20px; transition: .5s ease-in-out; }

a:hover { background-color: yellow; padding: 0.4em 1.6em; }

/============================= EXPERTISE =============================/

expertise {

display: block; overflow: auto; text-align: center; }

expertise h1 {

display: inline-block; }

expertise .fa {

font-size: 4.5em; }

expertise p {

width: 80%; }

/============================= MY WORK =============================/

my_work {

background-color: #eee; overflow: auto; text-align: center; }

.sphynx_media, .keystone_paint { width: 80vw; margin: 0 auto; text-align: center; }

.sphynx_media img, .keystone_paint img { width: 80vw; border-radius: 10px; }

/============================= ABOUT ME =============================/

about_me {

text-align: center; padding-bottom: 4em; }

/============================= FOOTER =============================/

footer { background-color: #0E1F3B; overflow: auto; padding: 5vw 0; text-align: center; }

footer p { color: #eee; font-size: 0.8em; }

1 Answer

Timo J.
PLUS
Timo J.
Courses Plus Student 20,919 Points
Timo J.
Timo J.
Courses Plus Student 20,919 Points

So in your responsive media at the wanted screen size html, body { overflow-x: hidden; }