Eliminate the horizontal scroll

Question

I've got a problem while adding an image to my project site.

So, when I use the element tag name only like 'img' then there is no horizontal scroll but when i use that image using a class selector like '.class img', then the horizontal scroll appears. Please help me I have never see a problem like this...

html,body {
    height: 100%;
    margin: 0;
}

nav {
    display: flex;
    background-color: #ffffff;
    padding: 10px;
}

nav a {
    text-decoration-line: none;
    color: black;
    font-size: 20px;
    padding-right: 25px;
    
    
}

.about {
    margin-left: auto;
}

.home {
    padding-left: 20px;
    padding-right: 0;
}

.first-img{
    width: auto;
    height: auto;
    
}

<html>

<head>

    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>
    <nav>
        <a class="home" href="#">Home</a>
        <a class="about" href="#">About</a>
        <a class="menu" href="#">Menu</a>
        <a class="contact" href="#">Contact</a>
    </nav>
    <div class="first-img">
        <img class="first" src="hamburger.jpg" />
    </div>





    <script type="text/javascript" src="script.js"></script>
</body>



</html>

Maybe is the original size of the image... set a `max-width` — Luís P. A., Dec 04 '18 at 15:39
Welcome to StackOverflow. May I point out that this questions was tagged with "web", which speficially reads "Do not use this tag". I'm editing to remove it. — random_user_name, Dec 04 '18 at 17:14

Aditi · Accepted Answer · 2018-12-05T05:03:48.043

4

You are facing this problem because width of the image will be greater than the viewport width to fix the horizontal scroll do the following:

.first {
    max-width: 100%;
    height: auto
}

edited Dec 05 '18 at 05:03

answered Dec 04 '18 at 15:48

Aditi

355
2
9

But can you tell me the reason when I'm using first-img it's not working... Why??? I need to know the reason – codelife Dec 04 '18 at 16:09
@user8490455 when you applied width: 100% on .first-img means you applied on the div and as image size is larger than viewport width it overflowed. – Aditi Dec 04 '18 at 16:32
May I suggest two edits to this: 1. adding `max-width: 100%;` is also a good idea, and 2. if you're going to set width to 100%, then it's important to add `height: auto;` – random_user_name Dec 04 '18 at 17:17
@cale_b thanks yes it's good to set max-width 100% so if any case in the future image is smaller than device width it's resolution will not be disturbed on stretching beyond its width. I am updating my post to reflect the same. – Aditi Dec 05 '18 at 05:08

score 0 · Answer 2 · answered Dec 04 '18 at 15:39

0

Try adding this to your class, also, I believe your HTML class needs to be first-img, not just "first"

 .first-img{
    width: auto;
    height: auto;
    overflow-x:hidden;
    overflow-y:hidden;
  }

"overflow-x" hides the horizontal, "overflow-y" hides the vertical

answered Dec 04 '18 at 15:39

Anthony Letizia

56
9

But by using overflow the problem is not going to solve it's just hide that scroll and the image will get cut off. – codelife Dec 04 '18 at 16:06
Thanks for the help really appreciated – codelife Dec 04 '18 at 16:07

score 0 · Answer 3 · edited Dec 04 '18 at 17:34

0

You Dont Need to add class for just width of image Simply Do this !

<img src="hamburger.jpg" width="100%" />

edited Dec 04 '18 at 17:34

marsaldev

3,338
2
16
27

answered Dec 04 '18 at 17:11

Devender Kumar

9
1

Thanks for trying to help - but inline styles are [generally a bad pattern](https://stackoverflow.com/questions/2612483/whats-so-bad-about-in-line-css). It is indeed better to add classes that are useful and can be easily updated. – random_user_name Dec 04 '18 at 17:15

Eliminate the horizontal scroll

3 Answers3