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.
Mark all posts that give the desired result the answer. If you only mark the last that gave you clarification because you misread an earlier post others will be confused. Some of us are here to help others and our point to post ratio matters.
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
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
32 Points
319 Posts
Layout on laptop is great, but poor on Bigger screen
May 03, 2019 08:21 PM|masterdineen|LINK
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
Contributor
7008 Points
2162 Posts
Re: Layout on laptop is great, but poor on Bigger screen
May 03, 2019 08:52 PM|ryanbesko|LINK
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/
Participant
1840 Points
702 Posts
Re: Layout on laptop is great, but poor on Bigger screen
May 06, 2019 03:01 AM|samwu|LINK
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
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
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.