Html Question posted in
Some basic documentation can be found here.

Html – How can I create a box where I can simulate different screen sizes with Tailwind CSS and Next JS

I am working on creating a website builder, and I want to be able to see what the page would look like on a phone, without having to always open the web inspector and changing the width of it. I looked it up, and I couldn’t find anything that worked. I want to be able to switch from desktop to tablet to phone size screens in a div (not the whole screen). I would appreciate any advice (ideas) you may have.

Tags:

2

Answers


  1. 0

    There are a few things you can try depending on what you want to do.
    Id suggest either setting the dementions of your html:

    html { width: 500px; height: 500px;}

    Or putting the webpage in an iframe with a certain size. you can set the dementions of the iframe like this:

    <iframe src="/yourWebPage" width="500" height="500"></iframe>
    Login or Signup to reply.
  2. 0

    Simply Create A Page that contains a dropdown with different set of screen sizes and An Iframe.
    Assuming you have a set of screen sizes on your dropdown list, on selection change of your dropdown use those width and height values in your iframe tag.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search