CODEWITHSUNDEEP
htmlcss
naufragio
naufragio

Reputation: 73

automatically decrease container width while resizing broswer window

I am using CSS and HTML trying to reproduce the homepage of this website http://www.newsweek.com/ as an exercise.

If you open the page with a large screen you will see at both sides two empty columns that gradually decreases as the broswer width is reduced.

I want to reproduce this behaviour but can't make it until the end: I have set a container class with initial width 80% that become 100% at some point thanks to media query in CSS:

@media screen and (max-width: 1047px) {
    .container {
    width:100%;}}

What I miss is the gradually reduction of this container. How it can be made?

Thank you very much

Upvotes: 1

Views: 116

Answers (1)

fredrivett
fredrivett

Reputation: 6574

For an experience like that, all you need is something like this:

.container {
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
}

If .container is applied to a block level element (like <div>) then this element naturally goes to be as wide as it can. This just says don't go wider than 1200px, and designate the left over space equally between the left and the right.

If for some reason the element is not block level (e.g. a <span>) then simply add display: block; to the above code to make it block level.

Upvotes: 2

Related Questions