Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS min-width fixed and percentage

Tags:

html

css

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)

like image 995
Aschab Avatar asked Dec 14 '22 03:12

Aschab


2 Answers

You only have to do this:

section {
    min-width: 600px;
}

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

like image 123
Mikel Porras Hoogland Avatar answered Dec 30 '22 09:12

Mikel Porras Hoogland


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?

like image 27
Johannes Avatar answered Dec 30 '22 10:12

Johannes