CODEWITHSUNDEEP
htmlcss
Tiedt Tech
Tiedt Tech

Reputation: 717

CSS 4 columns, adjust as size

I saw this page http://demo.smartaddons.com/templates/joomla3/sj-joomla3/ and was wondering how to do the same footer, when you decrease the size of the screen, the elements remain on top of one another.

I looked at the source, but did not understand me. I do not want to use Joomla, I do pure CSS and HTML.

tks

Upvotes: 0

Views: 68

Answers (2)

Digger
Digger

Reputation: 738

This is called a responsive page.

Using CSS3, you can set limits to the page width. And if the page reaches this limit, the style changes to accommodate the new size. In the example that you showed, there is a limit right where the screen reaches 1200px in widht and another one when it's in 979px and below.

you can set this by declaring this in your CSS:

@media (min-width: 1200px) {
    /* Your code here */
}

@media (min-width: 979px) {
    /* Your code here */
}

Upvotes: 1

web-tiki
web-tiki

Reputation: 103770

The footer you are talking about mixes several css properties. But the most imporant to get the "responsive effect" are floats and media queries

You will find inforamtion about media queries here and float here

Upvotes: 2

Related Questions