1

I am making custom html builder. But I want to implement responsive mode user without opening dev tools or changing windows size. https://www.mianfolio.com/ultimateblocks/v2.1.3/

above link can see on the left top there have 3 device options to show design. How can I implement such user interface to be able see content responsively on mobile or tablet views on clicking buttons? I want to show all inside a div.

I have tried adding class to implement but only div width get low. But content is not responsively adapts its parent. I know @media queries based on windows size. But the guy implemented it inside div. Therefore asking how can I also make it work.

WebMan
  • 360
  • 4
  • 14
  • After searching i have found the way to implement my purpose. But not the way I want but does work). The solution is that set an iframe and include all showing content inside it properly when clicking on mobile. When mobile view showed display none main content and take all of its content insert into iframe. So later when clicking desktop icon again just delete mobile view iframe data. Then change display: none to block on main content. This way I have achieved simple mobile responsive view on clicking icons. – WebMan Dec 26 '18 at 08:42

1 Answers1

1

You can use javascript. As the link you have provided changes width of the div i.e. #intro1 and changes width, font-size, etc of other child elements inside it to show a specific responsive design. What you can do is

To make responsive for tablet:

Create a button showing tablet icon and on clicking that button you can run a function eg:

function showTablet () {

   // first make #intro1 width to tablet device width 
   var tabletDiv = document.querySelector("#intro1");
   tabletDiv.style.width = "1020px";

   // Get child Elements and add css according to your responsive need
   // eg
   var childElement1 = document.querySelector('.just-example-child-element');
   childElement1.style.width = "50%";
   childElement1.style.fontSize = "15px";
   childElement1.style.margin = "15px";      

   // you can also add class to child elements according to your responsive design layout
   // eg
   var childElement2 = document.querySelector(".just-another-example-child-element");
   childElement2.className = "tablet-class";

   // And so on
}

To make responsive for mobile:

Create a button showing mobile icon and on clicking that button you can run a function eg:

function showMobile () {

   // first make #intro1 width to mobile device width 
   var mobileDiv= document.querySelector('#intro1');
   mobileDiv.style.width = "356px";

   // Get child Elements and add css according to your responsive need
   // eg
   var childElement1 = document.querySelector(".just-example-child-element");
   childElement1.style.width = "50%";
   childElement1.style.fontSize = "15px";
   childElement1.style.margin = "15px";      

   // And so on
}
Sahil Raj Thapa
  • 2,353
  • 3
  • 12
  • 23
  • Thank you for your answer. I also inspected and saw that custom implemented css and js. But I am interested in that is it possiple cheat media query css in a way to be responsive based on its parent div not only browser windows? – WebMan Dec 25 '18 at 19:13
  • Media queries works according to the browser window size. So, you need to resize the browser window. In some browser which is disabled by default. You can also go through https://stackoverflow.com/questions/7022787/can-i-resize-the-browser-window – Sahil Raj Thapa Dec 26 '18 at 04:30