locked
Layout on laptop is great, but poor on Bigger screen RRS feed

  • Question

  • User2037455357 posted

    Hello there

    I have started to create a Web App on my laptop. ( Using Visual Studio )

    When I preview (F5) it all looks good, but when I test it on my bigger monitor the Textboxes, labels etc are in a different position.

    Is there something I am not doing to account for different monitors or resolutions.???

    Kind Regards

    Rob

    Friday, May 3, 2019 8:21 PM

All replies

  • User2053451246 posted

    What library are you using for a layout that sizes to the screen (responsive layout)?  Bootstrap? A screenshot of the page on both screens would help as well.

    https://getbootstrap.com/docs/4.3/getting-started/introduction/

    Friday, May 3, 2019 8:52 PM
  • User288213138 posted

    Hi  masterdineen,
     

    Web App generally use responsive layouts, You can refer the following links about Responsive design for web forms and CSS.

    https://www.progress.com/documentation/sitefinity-cms/responsive-design-for-web-forms-pages

    https://www.w3schools.com/css/css_rwd_intro.asp

    You can try adding 

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    to your code.

     This is a meta to specify the width of your web page to the width of your device.

    The viewport is the part of the web app that displays the web page.

    The width in the content is the width of the visible area and the value is device-width.

    Init-scale means that the page is displayed for the first time as the zoom level of the visible area. If it is 1.0, the page will be displayed according to the actual size without any zoom.

    The code:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body {
                background-color: lightgreen;
            }
    
            @media only screen and (max-width: 600px) {
                body {
                    background-color: lightblue;
                }
            }
        </style>

    Best Regards,

    Sam

    Monday, May 6, 2019 3:01 AM