Jump to content
rizwansyed

Web page changes on other monitors

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Capture1.PNG

Capture3.JPG

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by rizwansyed

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

×