Web page changes on other monitors

[rizwansyed]

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

[Ingolme]

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.

[rizwansyed]

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

[dsonesuk]

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.

[rizwansyed]

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

[dsonesuk]

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.

[rizwansyed]

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

[dsonesuk]

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.

[rizwansyed]

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