A smartphone layout will usually go minimalist and only include the most important information. But on a larger display, especially a widescreen format, there is a lot of space outside of the main content that can be utilized. Desktop and laptop computers also tend to have more processing power than a smartphone. This makes it much tougher on the smartphone to load up all of the images, video and whatever other media may be included. These limitations and opportunities are good reasons for implementing the display property.
On the smartphone version of a website, media can take up too much space and processing power. The page can look cramped and take way too long to load. If some images aren't necessary, it may be helpful to simply set them to "display:none" with a media query. The same could be said of videos as they may really chew up phone data as well. If the video has some important information, you may be able to substitute in a link to a transcript of its content.
On the flip side, desktops and laptops have larger, higher-resolution screens and are better equipped to handle heavy-duty tasks. With more space, we have the option of just spreading out what content we have, like discussed on the previous page. However, if a website would benefit from more decorative elements, media or features, it may be wise to make full use of a more powerful computer's capabilities.
First, we don't have to hide the images and videos that we may have hidden for smartphones. Next, if there's excessive space on the sides, decorative background elements are always a possibility. Or, if there's additional information that can be added, a sidebar can be used. This type of feature may contain user testimonials, a trivia section ("Did you know?"), or even an expanded navigation bar with larger icons. Features like these can just be set to "display:none" until the viewport is wide enough to accommodate the extras.
