What is the best size to set your webpage during design?

Language Help HTML
,
1

When designing your webpages, what is the best width to set your webpages to make them span well across multiple monitors without a horizontal scroll bar or the need for a horizontal scroll bar?

2

It’s going to vary per media device depending on your layout scheme. You could theoretically do one layout that works for all, but it might be a bit limiting. I find it best to just use media queries and tackle each problem individually (and re-factor it afterwards).

1 Like
3

Okay! Thank you. I understand that media query is used to target various devices, say, mobile, tablet and PC, but this is not particularly about targeting devices now.

I just want to know if there’s a one-size-fits-all width that I can set my body element in my HTML or a width that I can set my main container div, to make it display without showing a horizontal scroll bar on any laptop monitor.

4

You could try using percentages and see if you like it.

2 Likes
5

Okay! This sounds positive.

Do you mean I should set the width of the body element or the main div container in percentages of what?

Percentages with respect to what, should I consider?

6

Per the MDN web docs…

The <percentage> CSS data type represents a percentage value. It is often used to define a size as relative to an element’s parent object. Numerous properties can use percentages, such as width , height , margin , padding , and font-size .

1 Like
7

Okay! Good.

In other words, I can just say something like

#main-container-div {
width: 100%;
}

OR

body {
width: 100%;
}

Would that be it?

8

Correct, though setting body to width: 100% seems superfluous:

the built-in offset from the edge of the page is applied through a margin on the body element

Source

So a better way to tackle that problem might be:

body{
  margin:0;
}
2 Likes
9

Many thanks. I think it now makes more sense.

Thanks again.

1 Like