Flexible layout and constraint element size

Responsive
1

My document is made to be fully scalable (using flexible layout) in order to adapt to screens from mobile to desktop.
I’ve got an element that’s stretching horizontaly to match the screen width but I’d like to prevent it from stretching above a certain size.
Exemple :
Mobile : element stretches to fill screen width
Tablet : idem
Desktop : max element width is, let’s say, 800 px

Is there a was to assign (maybe a CSS ?) to the element to limit its size ?

2

You can set a class on that object (naming it something like: max800 – make sure you start with a letter) in the Identity Inspector. Then, you can use this style in your document’s Head:

.max800 {max-width:800px;}

If you wanted this to only apply to only a certain viewport width range, you would use

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .max800 { max-width:800px; }
}
3

Thanks @Daniel,
It works perfectly !

1 Like
4

@kerguelen maybe also this post could be useful