 |
| How To Make Interesting Live Responsive Setup In 2022 |
elcome to SoiPro. In this post, we will know how to make an interesting Live Responsive Setup in blogger that shows every screen size together, with just a few easy steps.
One of the most necessary web design components is optimizing your website for various devices. A responsive website will adapt itself to the format of the device being used, whether it be a desktop, laptop, tablet, or phone.
Any content you present on your website must be readable and user-friendly on all devices. This post will show you how to create a live responsive setup for your website to look good on all types of screens.
What Is A Live Responsive Setup?
A live responsive setup is when you have a website that opens in the format of the device being used. For example, if you open your website on the phone, it will appear in mobile format. This allows for easy viewing and better compatibility with whatever device your audience uses to view your site.
Your website should be responsive to grow or shrink depending on which device someone is using to access it. You want to make sure that the content you present on your website is readable and user-friendly to all devices.
Responsive design has become popular since it becomes more difficult for people to use desktop computers to get things done. More people use phone devices like smartphones and tablets, making your website difficult to read because of the small screen size.
A responsive web design automatically adapts the layout to be readable and user-friendly no matter what device it’s being used on. This setup provides a live preview for your responsive design, and it helps for live responsive testing.
What Are The Advantages Of Having A Responsive Webdesign?
The advantages of a responsive website are in the name. A responsive setup will have a different layout, content, and features depending on the device being used.
For Example
If you’re using a desktop computer, your website will have more space for content and menus. If you’re viewing your site from a mobile phone, it will be condensed to fit the screen size.
A live responsive setup is also beneficial because it eliminates creating multiple web designs for different devices. You only need one design that looks good on any screen without redesigning anything.
How To Make A Live Responsive Setup?
To make a live responsive setup for your website, you need to add some code. These codes have to be added in just a few steps.
Making .HTML File For (Live Responsive Setup)
- Step 1 - Copy the HTML code provided below by double click.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Live responsive setup</title>
<style type="text/css">
.wrapper{width:90%;max-width:1200px;margin:0 auto}.display{position:relative;left:0;height:600px}div{background-repeat:no-repeat;background-size:100%;overflow:hidden}.ui-draggable iframe{transform:scale(.219);transform-origin:top left;margin:0;padding:0;position:relative;background-color:#fff;border-color:#000}.mobile{background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/24650/iphone-optimised.png);position:absolute;width:95px;height:196px;top:375px;left:300px;z-index:5}.mobile iframe{width:320px;height:480px;top:32px;left:11px;overflow-y:hidden}.tablet{background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/24650/ipad-optimised.png);width:246px;height:400px;z-index:3;position:absolute;left:120px;top:230px}.tablet iframe{width:768px;height:1024px;top:35px;left:38px;overflow-y:hidden}.laptop{background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/24650/laptop-screen-optimised.png);width:477px;height:307px;top:264px;left:560px;position:absolute;z-index:2}.laptop iframe{width:1280px;height:802px;top:26px;left:60px;transform:scale(.277);-webkit-transform:scale(.277);-o-transform:scale(.277);-ms-transform:scale(.277);-moz-transform:scale(.277);transform-origin:top left;-webkit-transform-origin:top left;-o-transform-origin:top left;-ms-transform-origin:top left;-moz-transform-origin:top left}.desktop{position:absolute;width:566px;height:538px;background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/24650/large-screen-optimised.png);top:0;left:220px;z-index:1}.desktop iframe{left:28px;top:38px;width:1600px;height:992px;transform:scale(.3181);-webkit-transform:scale(.3181);-o-transform:scale(.3181);-ms-transform:scale(.3181);-moz-transform:scale(.3181);transform-origin:top left;-webkit-transform-origin:top left;-o-transform-origin:top left;-ms-transform-origin:top left;-moz-transform-origin:top left}@media (max-width:1160px){.display{width:95%;height:550px;transform:scale(.81);-webkit-transform:scale(.81);-o-transform:scale(.81);-ms-transform:scale(.81);-moz-transform:scale(.81)}.desktop{left:180px}.laptop{left:520px}.tablet{left:80px}.mobile{left:260px}input{width:88%}}@media (max-width:1070px){.display{left:-50px}}@media (max-width:1000px){.display{height:500px;transform:scale(.71);-webkit-transform:scale(.71);-o-transform:scale(.71);-ms-transform:scale(.71);-moz-transform:scale(.71);top:-40px}.desktop{left:140px}.laptop{left:480px}.tablet{left:40px}.mobile{left:220px}}@media (max-width:850px){.display{height:500px;transform:scale(.65);-webkit-transform:scale(.65);-o-transform:scale(.65);-ms-transform:scale(.65);-moz-transform:scale(.65)}.desktop{left:100px}.laptop{left:440px}.tablet{left:0}.mobile{left:180px}}@media (max-width:768px){.display{height:450px;transform:scale(.55);-webkit-transform:scale(.55);-o-transform:scale(.55);-ms-transform:scale(.55);-moz-transform:scale(.55)}a.button{font-size:1.6em;line-height:1.75em;margin-top:.5em;width:100%}input{height:1.2em;width:100%}}@media (max-width:670px){.display{height:400px;left:-70px;transform:scale(.45);-webkit-transform:scale(.45);-o-transform:scale(.45);-ms-transform:scale(.45);-moz-transform:scale(.45)}}@media (max-width:560px){.display{height:270px;top:-65px;transform:scale(.37);-webkit-transform:scale(.37);-o-transform:scale(.37);-ms-transform:scale(.37);-moz-transform:scale(.37)}}@media (max-width:440px){.display{left:-17px;top:-65px;width:70px;transform:scale(.35);-webkit-transform:scale(.35);-o-transform:scale(.35);-ms-transform:scale(.35);-moz-transform:scale(.35)}}@media (max-width:380px){.display{height:235px;left:-17px;top:-65px;width:70px;transform:scale(.27);-webkit-transform:scale(.27);-o-transform:scale(.27);-ms-transform:scale(.27);-moz-transform:scale(.27)}.desktop{left:100px}.laptop{left:515px}.tablet{left:0}.mobile{left:180px}}
</style>
</head>
<body>
<div class="wrapper">
<section class="display">
<div class="mobile ui-draggable">
<div class="trim">
<iframe class="I-fme" id="mobile" src="https://wwww.soipro.com/">
</iframe>
</div>
</div>
<div class="tablet ui-draggable">
<div class="trim">
<iframe class="I-fme" id="tablet" src="https://wwww.soipro.com/">
</iframe>
</div>
</div>
<div class="laptop ui-draggable">
<div class="trim">
<iframe class="I-fme" id="laptop" src="https://wwww.soipro.com/">
</iframe>
</div>
</div>
<div class="desktop ui-draggable">
<div class="trim">
<iframe id="desktop" src="https://wwww.soipro.com/">
</iframe>
</div>
</div>
</section>
</div>
</body>
</html>
- Step 2 - Open your Notepad.
- Step 3 - Save your file by pressing the (Ctrl + S) button.
- Step 4 - Name your file, for example (Live Responsive Setup.html)
- Final Step - Your file is now ready to run.
Conclusion
A live responsive setup is where the website automatically changes the layout as per the screen size. In this article, we have seen how to set up a live responsive design for your Webdesign.
Do let us know if you have any other questions regarding the live responsive setup. You can get in touch with us via comment form or Fb. I’ll see you in the next post.