Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create different device looks (smartphone, tablet and laptop) with CSS?
A look for a smartphone, mobile, or desktop view can be easily created with CSS. For our example, we are creating a mobile i.e., a smartphone looks and will also open a random website in it. We will create a mobile device like structure and use iframe to add the website link. Let us see how to create a smartphone like device look on a web page.
Create a container for the mobile device
Create a parent div container −
<div class="mobileDevice">
<div class="screen">
<iframe src="https://wikipedia.org/" style="width:100%;border:none;height:100%" />
</div>
</div>
Set the iframe
Create a child container and place the <iframe> in it −
<div class="screen"> <iframe src="https://wikipedia.org/" style="width:100%;border:none;height:100%" /> </div>
Position the container for the mobile device
To position the container for the device, use the position property and set it to relative, Also, set the width and height. With that, set the border properties in a way to look it like a smartphone. To achieve this, the border-top-width and border-bottom-width properties work perfectly. Also, the border-radius property would give those perfect rounded corners like a smatphone −
.mobileDevice {
position: relative;
width: 360px;
height: 400px;
margin: auto;
border: 16px rgb(7, 80, 35) solid;
border-top-width: 60px;
border-bottom-width: 60px;
border-radius: 36px;
}
Create a button on the smartphone
To make a button to appear on the smartphone design, use the content property and transform property. For the round structure, set the border-radius to 50%. Also, to position perfectly, use the left and bottom properties −
.mobileDevice:after {
content: '';
display: block;
width: 35px;
height: 35px;
position: absolute;
left: 50%;
bottom: -65px;
transform: translate(-50%, -50%);
background: #333;
border-radius: 50%;
border:2px solid rgb(200, 255, 0);
}
Example
To create a smartphone device look-alike with CSS, the code is as follows −
<!DOCTYPE html>
<html>
<head>
<style>
.mobileDevice {
position: relative;
width: 360px;
height: 400px;
margin: auto;
border: 16px rgb(7, 80, 35) solid;
border-top-width: 60px;
border-bottom-width: 60px;
border-radius: 36px;
}
.mobileDevice:after {
content: '';
display: block;
width: 35px;
height: 35px;
position: absolute;
left: 50%;
bottom: -65px;
transform: translate(-50%, -50%);
background: #333;
border-radius: 50%;
border:2px solid rgb(200, 255, 0);
}
.mobileDevice .screen {
width: 360px;
height: 400px;
background: white;
}
</style>
</head>
<body>
<h1 style="text-align: center;">Device look example </h1>
<div class="mobileDevice">
<div class="screen">
<iframe src="https://wikipedia.org/" style="width:100%;border:none;height:100%" />
</div>
</div>
</body>
</html>
473 Views
