Fluid responsive

Fluid setup

También’s fluid setup is a tool that helps you to create a responsive and pixel-perfect website based on the maximum minimum width of your design prototype.  Learn about it here.

Desktop

prototype values

Px

Px

Px

prototype minimum values

Px

Px

Px

My container max-width is wider than my prototype width

prototype maximum values

Px

Px

Px

Tablet

I don't need this breakpoint

Prototype maximum values

Px

Px

Px

prototype minimum values

Px

Px

Px

Mobile

I don't need this breakpoint

Prototype maximum values

Px

Px

Px

prototype minimum values

Px

Px

Px

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Copy this code in the embed at the top of the page

<style>
html { font-size: 16px;}
@media (min-width: px) {
   html {font-size: calc(px +  * ((100vw - px) / ));}
}
@media (min-width: px) {
   html {font-size: calc(px +  * ((100vw - px) / ));}
}
@media (min-width: px) {
   html {font-size: calc(px +  * ((100vw - px) / ));}
}
@media (min-width: px) {
   html {font-size: px;}
}

.container {
   max-width: rem;
}

@media (min-width: px) {
   html {font-size: calc(px +  * ((100vw - px) / ));}
}

@media (min-width: px) {
   html {font-size: px;}
}

.container {
   max-width: rem;
}

</style>