CODEWITHSUNDEEP
htmlcss
tonyminhnguyen
tonyminhnguyen

Reputation: 173

Banner image doesn't cover the whole width

I'm trying to make the banner image of my website responsive (cover the whole width), but when I resized the browser to lower than ~225px, the image started to shrink.

The image is 6720x4480px, so I don't think the size of the image is the problem here. I also tried other methods in SO but they didn't work or maybe I just couldn't find the right one. Note that the image did cover the whole width when I viewed it on mobile (e.g Mobile S-320px using Chrome), so in a way it was responsive, but I wanted to understand and solve this problem completely. Any recommendations would be greatly appreciated.

Edit 2: Here's a GIF that I created for better visualization:

gyazo.com/1658a06cb68eb6b37e6044d8e060b8c6

Edit: Thanks to @FluffyKitten's suggestion. After I reproduced the problem, I believe it may be because of the styling of the text, but still got no answer. What I was trying to do was similar to this example from W3Schools, where I could resize it just fine. https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background_hero

Here's the snippet: 

*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 16px;
}
body {
  display: block;
}
/* Header */
header {
    position: relative; 
    max-width: 100%;
    height: auto;
    margin: auto;
}
header .hero-image {
    position: relative;
    height: 700px;
    background-image: url('https://i.imgur.com/kNmmQcd.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
header .title {
    position: absolute;
    width: 100%;
    color: #fff;
    top: 60%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
  }
header .title .header-title {
    font-size: 8rem;
}
header .title .header-sub-title {
    font-size: 3rem;
    margin-top: 2rem;
}
@media screen and (max-width: 425px) {
    header .title {
      top: 45%;
    }
    header .title .header-title {
        font-size: 4rem;
    }
    header .title .header-sub-title {
        font-size: 2rem;
        margin-top: 1rem;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>COFFEE TIME</title>
</head>
<body>
 <!-- Header Section -->
 <header class="header" id="home">
    <section class="hero-image">
        <div class="title">
            <h1 class="header-title">Coffee Time</h1>
            <h2 class="header-sub-title">Enjoy our most delicious coffee</h2>
        </div>
    </section>
</header>
</body>
</html>

Upvotes: 2

Views: 1060

Answers (1)

FluffyKitten
FluffyKitten

Reputation: 14312

I can recreate the problem when the following 2 conditions are met:

  • the device toolbar is turned on in Chrome inspector and
  • the screen gets too narrow for the text to fit any more e.g. it can no longer fit the word "Coffee"

It's easier to see what's happening if you change the font some colour other than white. If I change "Coffee Time" to "Coffeeeeee Time", the white border on the right starts showing up around 580px only when the device toolbar is on. If I don't have the device toolbar on, I can resize the window to any size and it doesn't appear.

The good news is that this only happens when you are using the device toolbar in Chrome, but it's possible it could cause issues in other less popular browsers so it's no harm to address it.

To prevent this happening, you can add any of the following CSS rules to header .title:

  • overflow-wrap: break-word; - this will force the word to wrap when it no longer fits on the screen
  • overflow:hidden; - this will prevent the the part of the word that doesn't fit from appearing on the screen, thus preventing the "extra width" issue to kicking in.
  • overflow:scroll; - lets the title text be scrolled.

Upvotes: 1

Related Questions