RESPONSIVE PAGES

People use many different devices to access the internet.

Even one person may use:

• a smartphone while traveling
• a laptop at home
• a desktop computer at work
• a tablet on the sofa

So for a developer, one thing is clear: a web page must look good on different screen sizes.

That is exactly why responsive design exists.

1. Why responsive pages are necessary

In the past, many web pages had a fixed width.

For example:

• page width = 960px
• and it stayed 960px wide everywhere

That created problems.

If the screen was:

• bigger than 960px -> too much empty space
• smaller than 960px -> horizontal scrolling or broken layout

Old fixed page

Large screen:
+----------------------------------------------+
|              960px page                      |
+----------------------------------------------+

Small screen:
+------------------+
| 960px page ----> |  content does not fit
+------------------+

Modern web pages should work well on:

• TV
• desktop
• laptop
• tablet
• smartphone
• other devices too

So modern websites use:

• adaptive design
• responsive design

2. Adaptive and responsive design

Adaptive and responsive design are similar, but not the same.

They differ in:

• how the content width is set
• how many design states are planned
• how the design changes between sizes

3. Responsive design

A responsive page has several display variations, but the transitions are smooth.

Elements stretch and shrink like rubber.

When the viewport changes:

• containers expand or shrink smoothly
• text blocks reflow
• elements move when needed
• breakpoints help reorganize the layout

Responsive idea

Wide screen:
[ sidebar ][ content area                    ]

Medium screen:
[ sidebar ][ content           ]

Small screen:
[ sidebar ]
[ content ]

Important detail: the change between these versions is smooth.

Responsive layout

large  -> medium  -> small
  smooth stretching and shrinking

Main idea:

Responsive = flexible layout with smooth transitions between sizes

4. Adaptive design

An adaptive page also has several versions, but they are more like separate fixed states.

The design changes abruptly at certain breakpoints.

Between those breakpoints, it does not stretch smoothly in the same flexible way.

Adaptive idea

Wide screen:
[ desktop layout ]

At breakpoint:
switch!

Tablet screen:
[ tablet layout ]

At breakpoint:
switch!

Phone screen:
[ mobile layout ]

Adaptive layout

large -----> desktop version
         breakpoint
medium ----> tablet version
         breakpoint
small -----> phone version

Main idea:

Adaptive = separate layout states that switch at exact breakpoints

5. Responsive vs adaptive

Responsive
- flexible width
- smooth resizing
- blocks stretch and shrink

Adaptive
- several fixed versions
- abrupt changes at breakpoints
- less fluid between states

Visual comparison:

Responsive:

[ layout stretches gradually ]

Adaptive:

[ version A ] -> breakpoint -> [ version B ] -> breakpoint -> [ version C ]

Short memory line:

Responsive = fluid
Adaptive   = step-by-step

6. What a breakpoint is

A breakpoint is the viewport size where:

• the whole layout changes
• or part of the layout changes

At that point, different CSS rules may apply.

Example idea:

• large screen -> 3 columns
• medium screen -> 2 columns
• small screen -> 1 column

Viewport width

1200px ----------- desktop layout
 900px ----------- tablet layout
 600px ----------- mobile layout

As screen becomes smaller:

[ 3 columns ] -> breakpoint -> [ 2 columns ] -> breakpoint -> [ 1 column ]

Main idea:

Breakpoint = screen width where styles change

7. What the viewport is

The viewport is the visible rectangular area of a web page.

It does not include:

• the browser address bar
• bookmarks bar
• browser buttons
• other browser interface parts

Browser window
+--------------------------------------+
| address bar / browser UI             |
+--------------------------------------+
|                                      |
|            VIEWPORT                  |
|      visible web page area           |
|                                      |
+--------------------------------------+

So the viewport is basically the visible page area inside the browser.

8. Two viewport ideas on mobile

On mobile devices, things get more complicated.

There are two important ideas:

• virtual viewport (layout viewport)
• physical viewport (visual viewport)

9. Virtual viewport

The virtual viewport is the layout area the browser uses internally.

On many mobile browsers, its default width is often around:

980px

This is much wider than the real phone screen.

Virtual viewport
+---------------------------------------------------+
|                    980px wide                     |
+---------------------------------------------------+

10. Physical viewport

The physical viewport is the real visible screen area of the device.

Example:

phone screen width = 400px

Physical device screen
+----------------------+
|       400px          |
+----------------------+

11. The core mobile problem

By default, a mobile browser may use the virtual viewport width instead of the real device width.

So:

• real screen = 400px
• browser thinks layout width = 980px

That creates a mismatch.

Real screen:        400px
Virtual viewport:   980px

Browser asks:
"What is the viewport width?"

Wrong default answer:
980px

But real screen is:
400px

This is the core problem.

12. Why that causes layout problems

If the browser thinks the width is 980px, it may apply larger-screen styles.

So on a phone, instead of mobile styles, you may get:

• tablet styles
• or even desktop-like layout behavior

Example:

• phone screen = 400px
• browser uses 980px layout viewport
• CSS breakpoint rules for 800px may apply
• result: tablet layout on a phone

Phone screen: 400px
Browser layout width: 980px
        down
Browser applies wider-screen styles
        down
Mobile page looks wrong

Visual example:

Expected on phone:
[ one column ]

But browser may show:
[ two columns squeezed ]

Correct mobile version:
[ Header ]
[ Content ]
[ Footer ]

Wrong wider version on phone:
[ Sidebar ][ Content ]

13. Why mobile CSS can fail without viewport setup

Adaptive or responsive CSS often depends on viewport width.

If that width is wrong, the wrong styles can win.

CSS rule for max-width: 800px
should apply on phone

But browser thinks width = 980px
so rule may not apply

Result:

Mobile styles missing
tablet/desktop styles override them

14. The viewport meta tag

To fix this problem, responsive pages must include the viewport meta tag inside <head>.

Code:

<head>
  <!-- Other meta tags -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>The viewport meta tag is important for responsive pages</title>
</head>

This tag tells the browser how to control:

• viewport width
• page scaling

15. What width=device-width means

This part:

width=device-width

means: set the viewport width equal to the physical screen width of the device.

Without viewport meta:
browser width = 980px

With width=device-width:
browser width = real device width

Example:

Phone screen = 400px

Now viewport width = 400px

That makes responsive CSS work correctly.

16. What initial-scale=1.0 means

This part:

initial-scale=1.0

means: use a 1:1 ratio between CSS pixels and device hardware pixels.

Simple idea:

• do not start zoomed out strangely
• do not shrink the page artificially at load

initial-scale=1.0
   down
page starts at normal scale

17. Why the viewport meta tag is essential

Without it:

• browser may use the wrong layout width
• breakpoints behave incorrectly
• mobile layout looks broken

With it:

• browser uses real device width
• responsive CSS works properly
• page fits mobile screens much better

Comparison:

Without viewport tag:
phone -> wrong wider layout

With viewport tag:
phone -> correct mobile layout

Visual:

Wrong:
+----------------------+
| [tiny desktop page]  |
+----------------------+

Correct:
+----------------------+
| [proper mobile page] |
+----------------------+

18. Developer tools and responsive mode

Browsers give developers tools for testing responsive layouts.

In Chrome, you can open them and simulate different devices and sizes.

Basic steps:

1. Open Developer Tools
2. Enable device toolbar
3. Resize the viewport or choose a device preset

19. How to open responsive tools in Chrome

Steps:

1. Open Developer Tools

• Ctrl + Shift + I on Windows/Linux
• Cmd + Shift + I on macOS

2. Click the device toolbar icon

• this enables responsive/device mode

3. Change viewport width

• by dragging the viewport
• or by entering exact values

Developer Tools
   down
Toggle device toolbar
   down
Responsive mode

20. What you can do in responsive mode

At the top of the responsive tools, there are useful controls.

Main controls:

• choose a device preset
• set exact width and height
• zoom the preview
• rotate the device
• use standard breakpoint widths

Responsive tools top bar
[ Device ] [ Width x Height ] [ Zoom ] [ Rotate ]

21. Device presets

You can choose real device presets, for example:

• iPhone
• iPad
• Pixel

Or choose:

• Responsive

Device menu
|- Responsive
|- iPhone
|- iPad
|- Pixel
+- ...

Meaning:

• preset device -> exact dimensions of that device
• Responsive -> custom width and height you choose yourself

22. Width and height controls

The current viewport width and height can be changed manually.

Width x Height
[ 390 ] x [ 844 ]

This lets you test exact sizes.

Example:

390 x 844 -> phone-like
768 x 1024 -> tablet-like
1440 x 900 -> desktop-like

23. Zoom control

Zoom is useful when the layout is large and you want to see the whole page.

Zoom:
25%   50%   75%   100%

This changes only how you view the page in dev tools. It does not change the actual responsive CSS behavior.

24. Rotate control

The rotate option simulates switching between:

• portrait mode
• landscape mode

Portrait:
+----------+
|          |
|          |
|          |
+----------+

Landscape:
+------------------+
|                  |
+------------------+

This is very useful because layouts often behave differently when the device rotates.

25. Quick breakpoint testing

Developer tools also provide a quick panel for testing standard breakpoint widths.

This helps you quickly check:

• mobile layout
• tablet layout
• desktop layout

Quick widths:
[ 320 ] [ 375 ] [ 480 ] [ 768 ] [ 1024 ] [ 1280 ]

This makes responsive testing faster.

26. Big responsive workflow diagram

Responsive page building
|
|- understand screen-size differences
|- create flexible layout
|- define breakpoints
|- add viewport meta tag
|- test on different viewport widths
+- adjust layout for mobile / tablet / desktop

27. Real design behavior example

Imagine a page with cards.

Desktop:

+--------+ +--------+ +--------+
| Card 1 | | Card 2 | | Card 3 |
+--------+ +--------+ +--------+

Tablet:

+--------+ +--------+
| Card 1 | | Card 2 |
+--------+ +--------+

+--------+
| Card 3 |
+--------+

Mobile:

+--------+
| Card 1 |
+--------+

+--------+
| Card 2 |
+--------+

+--------+
| Card 3 |
+--------+

This is the kind of adaptation responsive design handles.

28. Common mistakes

Mistake 1: Forgetting the viewport meta tag.

Problem: mobile browser may use virtual width like 980px.

Mistake 2: Thinking responsive and adaptive are exactly the same.

Problem: their behavior between breakpoints is different.

Mistake 3: Testing only on desktop width.

Problem: mobile issues remain hidden.

Mistake 4: Ignoring landscape orientation.

Problem: tablet and phone layouts may break after rotation.

Mistake 5: Using fixed-width design everywhere.

Problem: layout may overflow or look too narrow on different devices.

Fixed width only
   down
good on one screen
bad on many others

29. Mini cheat sheet

responsive design  -> flexible, smooth resizing
adaptive design    -> separate layout states
breakpoint         -> width where styles change
viewport           -> visible area of the web page
layout viewport    -> virtual browser viewport
visual viewport    -> real visible device area
viewport meta tag  -> makes mobile width behave correctly
width=device-width -> use real device width
initial-scale=1.0  -> normal initial zoom

30. Final summary

Modern web pages must look good on many different devices.

Important things to remember:

• fixed-width pages are not enough today
• responsive design changes smoothly across sizes
• adaptive design switches between separate layout states
• a breakpoint is the width where styles change
• the viewport is the visible page area
• mobile browsers may use a wider virtual viewport by default
• this can break mobile layout behavior
• the viewport meta tag fixes that by telling the browser to use the real device width
• developer tools help test layouts on many screen sizes and device presets

Super short memory line:

Responsive pages need:
flexible layout + breakpoints + correct viewport meta tag