12 Must‑Know CSS Fixes for Common Layout Pitfalls

1. Reset button and input backgrounds

Browsers render default button styles differently; Safari shows a gray background while Chrome does not. Resetting the appearance eliminates inconsistencies:

button {
  appearance: none;
  background: transparent;
  /* other styles */
}

See the live example on CodePen: https://codepen.io/shadeed/pen/MzWBYv/.

2. Overflow: scroll vs auto

Using overflow-y: scroll forces a vertical scrollbar even when content does not overflow, which appears on Windows Chrome. overflow-y: auto shows the scrollbar only when needed.

.element {
  height: 300px;
  overflow-y: auto;
}

Live demo: https://codepen.io/shadeed/pen/vQYwXj/.

3. Add flex-wrap

When a flex container shrinks, missing flex-wrap: wrap causes a horizontal scrollbar. Adding the property lets items wrap onto new lines.

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

Live demo: https://codepen.io/shadeed/pen/JejVLG/.

4. Avoid justify-content: space-between with an unknown number of flex items

When the number of flex items changes, space-between can produce uneven gaps. Switching to CSS Grid provides a more robust solution.

Live demo: https://codepen.io/shadeed/pen/XyWLLo/.

5. Long words and URLs

Long strings can overflow containers on mobile devices. Applying word-break: break-all forces breaks within the word.

article-content p {
  word-break: break-all;
}

More details: https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/.

6. Transparent gradients in Safari

Safari does not recognize the transparent keyword inside gradients, resulting in black artifacts. Replace it with rgba(0,0,0,0):

.section-hero {
  background: linear-gradient(rgba(0,0,0,0), #d7e0ef), #527ee0;
}

7. CSS Grid auto-fill vs auto-fit

auto-fill

creates as many tracks as will fit, leaving empty space if items are fewer. auto-fit collapses empty tracks, allowing items to stretch and fill the container. Example:

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

Reference: https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/.

8. Fixed header on short viewports

When a sticky header occupies too much vertical space on small viewports, wrap the sticky rule in a media query so it only activates on larger screens.

@media (min-height: 500px) {
  .site-header {
    position: sticky;
    top: 0;
    /* other styles */
  }
}

Live demo: https://codepen.io/shadeed/pen/oQLYmg/.

9. Constrain images with max-width: 100%

Setting img { max-width: 100%; } ensures images shrink to fit the viewport, preventing horizontal scrolling.

img {
  max-width: 100%;
}

10. Define main and aside with CSS Grid

Use a grid layout to keep aside height equal to main. Align aside to its parent if independent height is desired.

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-gap: 20px;
}
aside {
  grid-column: 1 / 4;
  align-self: start;
}
main {
  grid-column: 4 / 13;
}

Live demo: https://codepen.io/shadeed/pen/yQJgXr/.

11. Add fill to SVGs

Inline fill attributes on SVG elements can be overridden by higher‑specific CSS. Define a class with the desired fill color:

.some-icon {
  fill: #137cbf;
}

If the SVG already contains an inline fill, target the path element directly:

.some-icon path {
  fill: #137cbf;
}

12. Pseudo‑elements

When using ::before or ::after, always set content: "" and define display (e.g., inline‑block) along with explicit width and height so the element renders.

.element::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
}

13. Inline‑block spacing quirks

Browsers add whitespace between consecutive display: inline‑block elements, often resulting in extra space (e.g., 12 px instead of the intended 8 px). Fix by applying margin‑right: 8px to the elements or setting font-size: 0 on the parent container.

ul {
  font-size: 0; /* removes whitespace */
}
li {
  font-size: 16px; /* restore text size */
  margin-right: 8px;
}

14. Associate label with form controls

Link a label to its corresponding input using the for attribute and matching id on the input, improving accessibility and click‑to‑focus behavior.

<label for="emailAddress">Email address:</label>
<input type="email" id="emailAddress">

15. Font inheritance for interactive elements

Interactive elements ( input, button, select, textarea) do not inherit the page’s font by default. Explicitly set font-family for these controls.

input, button, select, textarea {
  font-family: your-awesome-font-name;
}

16. Debugging horizontal scrollbars

Run a small script in the console to outline every element, making it easy to locate the element that causes overflow:

[].forEach.call($$("*"), function(a) {
  a.style.outline = "1px solid #" + (~~(Math.random() * (1<<24))).toString(16);
});

Script source: https://gist.github.com/addyosmani/fd3999ea7fce242756b1.

17. Prevent image distortion

When resizing images, preserve aspect ratio by using object-fit: cover:

img {
  object-fit: cover;
}

18. Use correct type for input

Specifying appropriate input types (e.g., email, tel) triggers optimized keyboards on mobile devices.

<form>
  <p>
    <label for="name">Full name</label>
    <input type="text" id="name">
  </p>
  <p>
    <label for="email">Email</label>
    <input type="email" id="email">
  </p>
  <p>
    <label for="phone">Phone</label>
    <input type="tel" id="phone">
  </p>
</form>

Each input type displays a suitable on‑screen keyboard (e.g., numeric keypad for tel).

19. RTL layout phone number direction

In right‑to‑left layouts, a leading + in a phone number appears at the end. Force left‑to‑right direction for the field:

.cell-phone {
  direction: ltr;
}