Archive
This post is archived and may contain outdated information. It has been set to 'noindex' and should stop showing up in search results.
How To Create A Responsive Website Without Media Queries
Jun 27, 2014Web DevelopmentComments (1)
You can create a responsive website using only basic HTML and CSS (no media queries, CSS3, or JavaScript). It can't be too complex, but you can get along just fine for a simple website like a blog or portfolio.

The advantage to doing this is that you'll have better browser compatibility and cleaner CSS. Your CSS may also be easier to maintain and understand, since you won't have media queries changing things at different widths.

Here are some techniques that will help you accomplish a responsive website without media queries:


Percentage Padding and Margins


Use a percentage for the padding and margin of elements. This can give nice comfortable spacing on desktop, which tightens up nicely on mobile (and looks good at every width in between).

.content {
padding: 15px 3%;
}


Floats


Floating fixed width elements will cause them to automatically wrap as the browser width shrinks (just make sure they're the same height or they may wrap oddly).

.post {
float: left;
width: 100px;
height: 80px;
}


Max-width


Use a max-width to prevent your content from being too wide, but still allow it to shrink down with the browser width.

.content {
width: 100%;
max-width: 900px;
}


Percentage Width


Use a percentage width on elements so they take up less room as the browser shrinks. You can combine it with a max-width so the element is never too large.

.search {
width: 55%;
max-width: 240px;
}
Comments (1)
Add a Comment
Chineme Stephen   Jul 17, 2020
What about complex sites like e-commerce sites.