rizwansyed Posted November 21, 2018 Share Posted November 21, 2018 Hi My Web page changes when i try to open in different resolutions monitor. Whole content is getting changed .It is not as expected. I want my web page to be same irrespective of monitors. Is there any settings to do or any sample web page which has help to do this Please suggest Thanks and Regards Rizwan Syed Link to comment Share on other sites More sharing options...
Ingolme Posted November 21, 2018 Share Posted November 21, 2018 Without any demonstration of the problems or even an accurate description of what's occurring, we cannot know anything about your problem. We also need to know the code that is producing the page. As for your goal to have your page exactly the same on all monitors, that's impossible. Some monitors simply cannot fit certain designs, the pages have to be built in such a way that the content is rearranged to best suit each device. Link to comment Share on other sites More sharing options...
rizwansyed Posted November 21, 2018 Author Share Posted November 21, 2018 Hi I have attached two images. My web page should look similar to capture 1 image (monitor size is 1920*1080 ) but when monitor changes (monitor size is 1366*768) it changes similar to capture 3 (box comes under other not side by side as in capture1 image). div.check am using to create a box of width 800px. Is it possible to make its size in percentage of moinitor instead of 800px. I mean based on monitor, its size should be changed? <style> div.check { background-color: lightgrey; width: 800px; border-style: solid; border-color: #92a8d1; display: inline-block; } </style> <div class="check"> //code for BOX 1 </div> <div class="check"> //code for BOX 2 </div> <div class="check"> //code for BOX 3 </div> <div class="check"> //code for BOX 4 </div> Thanks and Regards Rizwan Syed Link to comment Share on other sites More sharing options...
dsonesuk Posted November 21, 2018 Share Posted November 21, 2018 Yes! Using width: 50%; is valid, but if the content is fixed width and total width extends beyond 50% of monitor you will have the same problem. Link to comment Share on other sites More sharing options...
rizwansyed Posted November 21, 2018 Author Share Posted November 21, 2018 (edited) Hi i have seen a property of screen.width; If i use this property , it will be helpful.I thought to use like screen.width* 0.4 How to define it in style <style> div.check { background-color: lightgrey; width: 800px; border-style: solid; border-color: #92a8d1; display: inline-block; } </style> Instead of 800px in above style content, i think i can try with width: 40% Whether the 40% will be taken form total width of screen? Thanks and Regards Rizwan Syed Edited November 21, 2018 by rizwansyed Link to comment Share on other sites More sharing options...
dsonesuk Posted November 21, 2018 Share Posted November 21, 2018 The width: 40%; will be 40% of the total parent container element width it is within, and its not the same as screen, it is of the browser window viewport area. Link to comment Share on other sites More sharing options...
rizwansyed Posted November 21, 2018 Author Share Posted November 21, 2018 Hi If browser window is full, then it will be similar to Monitor size. I want to give 40% of screen width like screen.width*0.4 instead of width: 800px; How can i do it? Thanks and Regards Rizwan Syed Link to comment Share on other sites More sharing options...
dsonesuk Posted November 21, 2018 Share Posted November 21, 2018 Not if it has vertical scrollbar which will reduce the width, top menu, status bar of browser which will reduce height, not including O/S menu if it is not hidden. Also here's an idea! Why not actually try using width: 40% instead coming here to this forum and asking if it will work, you don't require permission from us, its how you learn by experimenting. Link to comment Share on other sites More sharing options...
rizwansyed Posted November 21, 2018 Author Share Posted November 21, 2018 Hi Thanks for the suggestions. Actually tried with width 40% directly.It was fine when compared with before code. 5 hours ago, dsonesuk said: 40% of the total parent container element width it is within, and its not the same as screen So i just wanted to use direct screen size to avoid confusion on browser window size or other monitor size. Thanks and Regards Rizwan Syed Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now