width

Use % for fluid layouts that adapt to screen size. Great for flexible mobile containers.

Example: width: 90%;

<style>
.box-width {
  width: 90%;
  background-color: #cce5ff;
  padding: 1rem;
  margin: 1rem auto;
  text-align: center;
}
</style>

<div class="box-width">This box is 90% wide on the screen</div>

max-width

Prevents designs from stretching too far on big screens while staying fluid on small screens.

Example: max-width: 600px;

<style>
.box-max-width {
  width: 100%;
  max-width: 600px;
  background-color: #d4edda;
  padding: 1rem;
  margin: 1rem auto;
  text-align: center;
}
</style>

<div class="box-max-width">Max width capped at 600px</div>

min-width

Ensures buttons or inputs don’t shrink too much, maintaining tap targets.

Example: min-width: 200px;

<style>
.button-min-width {
  min-width: 200px;
  padding: 0.5rem 1rem;
  background-color: #f8d7da;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

<button class="button-min-width">Tap Me</button>

height

Use vh for full-height sections that adapt to mobile screens.

Example: height: 50vh;

<style>
.section-height {
  height: 50vh;
  background-color: #fff3cd;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

<div class="section-height">Half of viewport height</div>

max-height

Controls tall elements to avoid scrolling issues on small screens.

Example: max-height: 400px;

<style>
.box-max-height {
  max-height: 400px;
  overflow: auto;
  background-color: #e2e3e5;
  padding: 1rem;
}
</style>

<div class="box-max-height">
  <p>This box won't grow taller than 400px. Add lots of text here to see scroll.</p>
</div>

min-height

Avoids content squishing on mobile; ensures adequate space.

Example: min-height: 100px;

<style>
.box-min-height {
  min-height: 100px;
  background-color: #f8f9fa;
  padding: 1rem;
}
</style>

<div class="box-min-height">Always at least 100px tall</div>

padding

Makes sure text/buttons aren’t cramped for finger tapping.

Example: padding: 1rem;

<style>
.box-padding {
  background-color: #d1ecf1;
  padding: 1rem;
}
</style>

<div class="box-padding">This box has 1rem padding</div>

margin

Creates breathing room between sections for mobile readability.

Example: margin: 1rem auto;

<style>
.box-margin {
  width: 80%;
  margin: 1rem auto;
  background-color: #fefefe;
  padding: 1rem;
  border: 1px solid #ccc;
}
</style>

<div class="box-margin">Centered with margin</div>

box-sizing

Keeps padding/borders within defined width for consistent layouts.

Example: box-sizing: border-box;

<style>
.box-border-box {
  width: 200px;
  padding: 20px;
  border: 5px solid #17a2b8;
  box-sizing: border-box;
  background-color: #e9f7fa;
}
</style>

<div class="box-border-box">Width includes padding & border</div>

display: flex

Choose flex or grid for responsive, mobile-friendly layouts.

Example: display: flex;

<style>
.flex-container {
  display: flex;
  background-color: #f1f1f1;
  padding: 1rem;
  gap: 1rem;
}
.flex-item {
  flex: 1;
  background-color: #cce5ff;
  padding: 1rem;
  text-align: center;
}
</style>

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
</div>

flex

Controls item flexibility inside flex containers for adaptable spacing.

Example: flex: 1;

<style>
.flex-container {
  display: flex;
  gap: 1rem;
  background-color: #f8f9fa;
  padding: 1rem;
}
.flex-item {
  flex: 1;
  background-color: #cce5ff;
  padding: 1rem;
  text-align: center;
}
</style>

<div class="flex-container">
  <div class="flex-item">Flexible 1</div>
  <div class="flex-item">Flexible 2</div>
</div>

flex-direction

Switch between horizontal and vertical layouts on mobile.

Example: flex-direction: column;

<style>
.flex-column {
  display: flex;
  flex-direction: column;
  background-color: #e2e3e5;
  padding: 1rem;
  gap: 0.5rem;
}
.item {
  background-color: #d4edda;
  padding: 1rem;
}
</style>

<div class="flex-column">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

flex-wrap

Prevents overflow by stacking flex items onto new lines.

Example: flex-wrap: wrap;

<style>
.flex-wrap-container {
  display: flex;
  flex-wrap: wrap;
  background-color: #f1f1f1;
  gap: 1rem;
  padding: 1rem;
}
.box {
  flex: 0 0 120px;
  background-color: #cce5ff;
  padding: 1rem;
  text-align: center;
}
</style>

<div class="flex-wrap-container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

justify-content

Distributes space evenly for responsive alignment.

Example: justify-content: space-between;

<style>
.flex-justify {
  display: flex;
  justify-content: space-between;
  background-color: #e2e3e5;
  padding: 1rem;
}
.item {
  background-color: #f8d7da;
  padding: 1rem;
}
</style>

<div class="flex-justify">
  <div class="item">Left</div>
  <div class="item">Right</div>
</div>

align-items

Centers or aligns flex items in a container for better balance.

Example: align-items: center;

<style>
.flex-align {
  display: flex;
  align-items: center;
  height: 150px;
  background-color: #f1f1f1;
  padding: 1rem;
}
.item {
  background-color: #d4edda;
  padding: 1rem;
}
</style>

<div class="flex-align">
  <div class="item">Centered Item</div>
</div>

align-self

Adjusts one item’s position in a flex layout for custom design.

Example: align-self: flex-start;

<style>
.flex-container-self {
  display: flex;
  height: 150px;
  background-color: #f8f9fa;
  gap: 1rem;
  padding: 1rem;
}
.item {
  background-color: #cce5ff;
  padding: 1rem;
}
.special {
  align-self: flex-start;
  background-color: #f8d7da;
}
</style>

<div class="flex-container-self">
  <div class="item">Normal Item</div>
  <div class="item special">Aligned Start</div>
</div>

gap

Adds consistent space without extra margins for clean mobile spacing.

Example: gap: 1rem;

<style>
.flex-gap {
  display: flex;
  gap: 1rem;
  background-color: #e2e3e5;
  padding: 1rem;
}
.item {
  background-color: #d4edda;
  padding: 1rem;
}
</style>

<div class="flex-gap">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

grid-template-columns

Set flexible columns for adaptable grid layouts.

Example: grid-template-columns: 1fr 1fr;

<style>
.grid-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  background-color: #f1f1f1;
  padding: 1rem;
}
.box {
  background-color: #cce5ff;
  padding: 1rem;
  text-align: center;
}
</style>

<div class="grid-columns">
  <div class="box">Column 1</div>
  <div class="box">Column 2</div>
</div>

grid-template-rows

Controls row heights for balanced grids.

Example: grid-template-rows: auto;

<style>
.grid-rows {
  display: grid;
  grid-template-rows: auto auto;
  gap: 1rem;
  background-color: #e2e3e5;
  padding: 1rem;
}
.box {
  background-color: #d4edda;
  padding: 1rem;
}
</style>

<div class="grid-rows">
  <div class="box">Row 1</div>
  <div class="box">Row 2</div>
</div>

gap (grid-gap)

Adds even gaps between grid items for better separation.

Example: gap: 16px;

<style>
.grid-gap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  background-color: #f1f1f1;
  padding: 1rem;
}
.item {
  background-color: #cce5ff;
  padding: 1rem;
  text-align: center;
}
</style>

<div class="grid-gap">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

position

Use relative, absolute, or fixed to layer elements as needed.

Example: position: relative;

<style>
.position-parent {
  position: relative;
  background-color: #e2e3e5;
  padding: 2rem;
}
.position-child {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #f8d7da;
  padding: 0.5rem;
}
</style>

<div class="position-parent">
  Parent Box
  <div class="position-child">Child Positioned</div>
</div>

top, bottom, left, right

Precisely move positioned elements for perfect mobile alignment.

Example: top: 10px; left: 5px;

<style>
.relative-container {
  position: relative;
  background-color: #e2e3e5;
  padding: 2rem;
}
.absolute-box {
  position: absolute;
  top: 10px;
  left: 5px;
  background-color: #d4edda;
  padding: 0.5rem;
}
</style>

<div class="relative-container">
  Container
  <div class="absolute-box">Positioned Box</div>
</div>

overflow

Hide or scroll overflowing content on small screens.

Example: overflow: hidden;

<style>
.overflow-box {
  width: 200px;
  height: 100px;
  overflow: hidden;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  padding: 0.5rem;
}
</style>

<div class="overflow-box">
  This content is too long and will be clipped. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

overflow-x

Enable horizontal scrolling for wide content on mobile.

Example: overflow-x: auto;

<style>
.scroll-x {
  overflow-x: auto;
  white-space: nowrap;
  background-color: #f5f5f5;
  padding: 0.5rem;
  border: 1px solid #ccc;
}
.item {
  display: inline-block;
  width: 200px;
  background-color: #cce5ff;
  margin-right: 1rem;
  text-align: center;
  padding: 0.5rem;
}
</style>

<div class="scroll-x">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

overflow-y

Control vertical overflow for embedded content or modals.

Example: overflow-y: scroll;

<style>
.scroll-y {
  height: 150px;
  overflow-y: scroll;
  background-color: #f5f5f5;
  padding: 0.5rem;
  border: 1px solid #ccc;
}
.content {
  height: 300px;
  background-color: #d4edda;
  padding: 1rem;
}
</style>

<div class="scroll-y">
  <div class="content">Tall content to scroll vertically</div>
</div>

object-fit

Makes images cover their container without distortion.

Example: object-fit: cover;

<style>
.img-fit {
  width: 300px;
  height: 200px;
  object-fit: cover;
  border: 2px solid #ccc;
}
</style>

<img src="https://via.placeholder.com/400x300" class="img-fit" alt="Cover Example">

object-position

Adjusts where the image is cropped or centered.

Example: object-position: center;

<style>
.img-position {
  width: 300px;
  height: 200px;
  object-fit: cover;
  object-position: center;
  border: 2px solid #ccc;
}
</style>

<img src="https://via.placeholder.com/400x300" class="img-position" alt="Center Example">

background-size

Makes background images cover or contain areas responsively.

Example: background-size: cover;

<style>
.bg-cover {
  width: 100%;
  height: 200px;
  background-image: url('https://via.placeholder.com/600x400');
  background-size: cover;
  background-position: center;
  border: 2px solid #ccc;
}
</style>

<div class="bg-cover"></div>

background-position

Controls image placement within the background area.

Example: background-position: center;

<style>
.bg-position {
  width: 100%;
  height: 200px;
  background-image: url('https://via.placeholder.com/600x400');
  background-size: cover;
  background-position: center;
  border: 2px solid #ccc;
}
</style>

<div class="bg-position"></div>

background-repeat

Prevents tiling, ensuring a single background image.

Example: background-repeat: no-repeat;

<style>
.bg-no-repeat {
  width: 100%;
  height: 200px;
  background-image: url('https://via.placeholder.com/600x400');
  background-repeat: no-repeat;
  background-size: cover;
  border: 2px solid #ccc;
}
</style>

<div class="bg-no-repeat"></div>

font-size

Scale text for readability on all devices.

Example: font-size: 1.2rem;

<style>
.text-size {
  font-size: 1.2rem;
  background-color: #f5f5f5;
  padding: 1rem;
}
</style>

<div class="text-size">This text is 1.2rem</div>

line-height

Adds breathing room between lines for easier reading.

Example: line-height: 1.5;

<style>
.text-line-height {
  line-height: 1.5;
  background-color: #f5f5f5;
  padding: 1rem;
}
</style>

<div class="text-line-height">Line 1<br>Line 2</div>

text-align

Centers or justifies text for better mobile layouts.

Example: text-align: center;

<style>
.text-center {
  text-align: center;
  background-color: #f5f5f5;
  padding: 1rem;
}
</style>

<div class="text-center">Centered Text</div>

word-break

Breaks long words to fit narrow screens.

Example: word-break: break-word;

<style>
.break-word {
  word-break: break-word;
  width: 150px;
  background-color: #f5f5f5;
  padding: 1rem;
}
</style>

<div class="break-word">ThisIsAVeryLongWordThatWillBreak</div>

white-space

Allows or prevents text wrapping for design control.

Example: white-space: normal;

<style>
.white-space {
  white-space: normal;
  background-color: #f5f5f5;
  padding: 1rem;
}
</style>

<div class="white-space">This text will wrap onto the next line.</div>

media queries

Apply different styles for mobile vs desktop.

Example: @media (max-width: 600px) { ... }

<style>
.responsive-box {
  width: 400px;
  background-color: #cce5ff;
  padding: 1rem;
}
@media (max-width: 600px) {
  .responsive-box {
    width: 100%;
    background-color: #d4edda;
  }
}
</style>

<div class="responsive-box">Resize the screen to see color change</div>

aspect-ratio

Keeps images and videos proportionate on any screen.

Example: aspect-ratio: 16/9;

<style>
.aspect-box {
  width: 100%;
  aspect-ratio: 16/9;
  background-color: #cce5ff;
  border: 2px solid #ccc;
}
</style>

<div class="aspect-box"></div>