: Incorrect background color show on mobile devices I am using Bootstrap and wanted a colored background for my h2 title like this: So I wrapped the text in a tag. The problem is on mobile

@Berumen635

I believe the problem is that you're applying the background color to the inner tag (a span?) instead of to the outer h2. You haven't said exactly how you're using Bootstrap, so I put together an example (codepen) that I think shows what you have and what you want with just basic CSS.

Here's the HTML:

<h2 id="bad"><span>Restaurant Reservations & Take-Aways</span></h2>
<h2 id="good">Restaurant Reservations & Take-Aways</h2>


And the CSS; ignore the width=10em; that's just to simulate a narrow/mobile screen:

h2 { width: 10em; text-align: center; line-height: 0.9; color: white;}
h2#bad span {background-color: black;}
h2#good {background-color: black;}


So, the idea is to make sure the background applies to the block-level element, the h2, not the inline text, the span. Hope you can easily work that back into your Bootstrap setup.

Vote Up Vote Down