Hi! I wanted to share with you my solution to a well known headache during sites development: fullscreen hero image with only CSS.
After spending a lot of time on it, and reading a lot, i came up with a pretty working solution (i wouldn't say a 100% working solution) but yet a solid one:
.fullscreen-wrapper {
width: 100%;
height: 100vh;
/** mobile non iOS devices */
@media (hover: none) and (pointer: coarse) {
height: calc(100vh - 56px);
@media (orientation: landscape) {
min-height: 100vh;
height: auto;
}
}
/** iOS devices */
@supports (-webkit-touch-callout: none) {
height: -webkit-fill-available;
@media (orientation: landscape) {
min-height: auto;
height: -webkit-fill-available;
}
}
}
Let me know what you think and if it works!
Top comments (0)