How to prevent iPhone from zooming in on select in a web app with CSS?

To prevent iPhone from zooming in on select in a web app with CSS, we add a meta element and set the drop[ down font size.

For instance, we write

<meta
  name="viewport"
  content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>

to add a meta tag that disable zooming by setting the minimum-scale and maximum-scale to 1.0.

Then we write

select {
  font-size: 50px;
}

to set the font size of the select element to 50px.

How to center align an absolutely positioned div with CSS?

To center align an absolutely positioned div with CSS, we set the transform property.

For instance, we write

div#thing {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 50%;
  transform: translateY(-50%);
}

to horizontally align the div with left: 50%; and transform: translateX(-50%);.

And we vertically align the div with top: 50%; and transform: translateY(-50%);.

How to add a 100% width background image with an ‘auto’ height with CSS?

To add a 100% width background image with an ‘auto’ height with CSS, we set the background-position and background-size properties.

For instance, we write

body {
  background-image: url(img.jpg);
  background-position: center top;
  background-size: 100% auto;
}

to add the background-position property to center the background image.

And we add background-size: 100% auto; to make the background image fill the body element.

How to fix the select option padding not working in Chrome with CSS?

To fix the select option padding not working in Chrome with CSS, we set the appearance property.

For instance, we write

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 5px;
}

to set apperance to none before setting the padding to make the padding apply.

How to fade out text on overflow with CSS if the text is bigger than allowed?

To fade out text on overflow with CSS if the text is bigger than allowed, we add a linear gradient mask.

For instance, we write

<div>
  <div class="fade">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mauris
    nunc, vehicula at nisl eu, aliquam ultrices augue. Nullam eget auctor metus.
  </div>
</div>

to add nested divs.

Then we write

.fade {
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
}

to select the div and add a mask to apply a linear gradient to apply the fade effect.