Ensuring important information below an image is visible.

In creating responsive web sites, we sometimes want to put a photo at the top of the page, but still ensure that the user sees important text below the photo at first glance. Otherwise, the user might not know that there is important information he should scroll to. We can use flex boxes and viewport units to accomplish this.

In the first image below, the image cuts off the bottom of the house to ensure the reader will see the important information below it. The second image shows what the user sees after scrolling down over the photo. Now he sees the bottom of the photo and still the important text.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width">
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="demo.css">
</head>
<body>
    <div id="divMain">
        <div id="topDiv">
<img src="house.jpg" /></div>
        <div id="bottomDiv">
            <h5>This is important information that must be seen.</h5>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in tellus varius, 
                sollicitudin leo eget, iaculis lacus. In vitae purus non ante vestibulum molestie at ac lorem. Donec at tortor id lorem scelerisque ullamcorper id in sapien. Aliquam pellentesque ex sed diam lobortis, non pretium felis hendrerit. Quisque a faucibus lacus, iaculis mollis ex. Praesent sed velit sed augue dapibus eleifend sit amet in massa. Mauris eu orci ac dui eleifend aliquet. Quisque nisl leo, consequat id magna vitae, finibus ornare felis. Pellentesque eget tempor mauris. Aliquam suscipit lectus suscipit semper scelerisque. Etiam lobortis scelerisque lorem in scelerisque. Mauris vehicula felis pretium libero accumsan malesuada. Donec mauris elit, maximus et sapien quis, vehicula tempor nisl. Suspendisse fringilla scelerisque est, nec rhoncus velit suscipit sed.
            </p>
        </div>
    </div>
</body>
</html>




body {
}
@media only screen and (max-width: 700px) {
    
    #divMain {
        display: flex;
        flex-direction: column;
        font-size: 2em;
    }

    #topDiv {
        max-height: 40vh;
        overflow: scroll;
    }

        #topDiv img {
            width: 100%;
        }

    #bottomDiv {
        
    }
}

This is particularly important for websites viewed on phones. The user often needs to see important information immediately. On a bigger screen, viewing the whole image would not be a problem and so we apply this to just small screens. The trick here is to use viewport units so that the first div is always 40% of the height of the screen or 40vh at the moment the user opens the web page.

Posted in CSS

Leave a Reply

Your email address will not be published. Required fields are marked *