{"id":1535,"date":"2013-05-27T12:20:22","date_gmt":"2013-05-27T17:20:22","guid":{"rendered":"https:\/\/www.bodhost.com\/blog\/?p=1535"},"modified":"2026-02-26T13:58:48","modified_gmt":"2026-02-26T13:58:48","slug":"website-content-resolution-and-css","status":"publish","type":"post","link":"https:\/\/www.bodhost.com\/blog\/website-content-resolution-and-css\/","title":{"rendered":"Website Content Resolution and CSS"},"content":{"rendered":"
\r\n
\"\"<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n
\r\n

How to adjust content to the resolution of the visitor? What resolution should I choose?<\/p>\r\n<\/blockquote>\r\n\r\n\r\n\r\n

Simply apply a relative width, which changes depending on the size of the Window and the screen of the visitor page. The most common is to use the body tag. If you use a #div or body tag to adjust the size of the page, use the below CSS code:<\/p>\r\n\r\n\r\n\r\n

\r\n

body {width: 100%;}<\/p>\r\n<\/blockquote>\r\n\r\n\r\n\r\n

With the above code, your page will take 100% of the Window, regardless of its size. Obviously, you can set the width you want such as 90%, 80%, etc\u2026 If you define a smaller width, it can focus with \u201cmargin auto\u201d.<\/p>\r\n\r\n\r\n\r\n

Note: You must define a width in %, not other units because % is a percentage of the width of the Window, unlike the row heights whose sizes are predefined. You do not have to remember this, but if you are confused then do not mind, just make sure you follow these directions.<\/p>\r\n\r\n\r\n\r\n

\r\n

Facts<\/p>\r\n<\/blockquote>\r\n\r\n\r\n\r\n

It is important that your page is not smaller than a certain size, you can use the min-width property (which does not work in IE browser). You can also use the max-width property to set the maximum extent. Although, this practice is not recommended because it is not nice to have a smaller page than the Window.<\/p>\r\n\r\n\r\n\r\n

Example: A page with 80% width, centered alignment, a minimum width of 500 pixels, and a maximum width of 1000 pixels:<\/p>\r\n\r\n\r\n\r\n

\r\n

body {width: 80%; margin: auto; min-width: 500px; max-width: 1000px}<\/p>\r\n<\/blockquote>\r\n","protected":false},"excerpt":{"rendered":"

How to adjust content to the resolution of the visitor? What resolution should I choose? Simply apply a relative width, which changes depending on the size of the Window and…<\/p>\n

Read More<\/a><\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[275],"tags":[220],"class_list":["post-1535","post","type-post","status-publish","format-standard","hentry","category-css-2","tag-css"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t