First you should block format your images in .image_container as inline images can not be styled pixel precisely.
PHP Code:
.image_container img {
display: block;
}
Then, if you have a container with floated elements in it, you should set those containers to overflow hidden.
PHP Code:
[id^="featured"] {
overflow: hidden;
}
You don't have to give elements an ID e.g. featuredfirst, featuredsecond ... if you don't style them with CSS or work on them with JS. You better give them a class "featured". So you can write the last code as
PHP Code:
.featured {
overflow: hidden;
}
Contao normaly does this with
PHP Code:
.block {
overflow: hidden;
}
You should not set those images to height 80% on a breakpoint - better is height auto.
Think about what happens, with max-width:100%; height:auto; on those images. First the surrounding FIGURE and DIVs try to get the whole width that is possible. Width: 100%; is browser default if they aren't floated or positioned absolute or fixed. Default height is auto. Now the images try to get as big as possible (640px or 320px) but not wider as the surrounding containers as they are set to max-width: 100%. Finally the images height gets adjusted to the measured width so they keep aspect ratio with height:auto;.
You have to consider all that and make a plan for the different breakpoints on how many images you want to show in a row and how big those images are.
Bookmarks