CODEWITHSUNDEEP
htmlcss
Aschab
Aschab

Reputation: 1399

CSS min-width fixed and percentage

I'm wondering if I can have a section to have min width both as percentage and a fixed amount. Let me be more clear, I have the following html:

<body>
<main>
    <section id="home-section">
        ...Content...
    </section>
    <section id="team-section">
        ...Content...
    </section>
</main>
</body>

I have

section{
    min-width: 100%;
}

Is there a way to have min-width as both: 100% and 600px? So that if the viewport is less than 600px the width its 600px and if its more the min-width its 100%? (It can be more because of content)

Upvotes: 5

Views: 3936

Answers (3)

Johannes
Johannes

Reputation: 67768

The usual way is a bit different. You define for example:

width: 100%
max-width: 600px;

That way it will have the full width in smaller viewports, but never grow beyond 600px

P.S.: You wrote

So that if the viewport is less than 600px the width its 600px

That way it would be wider than the viewport on smaller screens - I suppose this isn't what you want, is it?

Upvotes: 5

Hunter Turner
Hunter Turner

Reputation: 6894

Just specify a width: 600px; with your min-width and you should get what you're looking for.

This will make the section's 100% when the width is greater than 600px, and 600px when it is less than 600px, which is what you requested.

CSS

section {
    min-width: 100%;
    width: 600px;
}

JSFiddle

section {
    min-width: 100%;
    width: 600px;
    background-color: yellow;
}
<main>
    <section id="home-section">
        ...Content...
    </section>
    <section id="team-section">
        ...Content...
    </section>
</main>

Upvotes: 1

Mikel Porras Hoogland
Mikel Porras Hoogland

Reputation: 537

You only have to do this:

section {
    min-width: 600px;
}

it is automatically 100%, with a minimum of 600px.

Upvotes: 7

Related Questions