Jump to content


This topic is now archived and is closed to further replies.


Monitor size and resolution affecting content width

Recommended Posts


Hi there,


I have been trying to get a background image of a text-box section in a right hand column to resize depending on the browser.  In doing so I have noticed something odd happening.


I started this work on my home PC with a 1900 x 1200 monitor.  I resized the width of the content to 1200px.


Having come into the office today I have a dual monitor setup, one 1920 x 1080 and the other an old 1280 x 1024.


I had Chrome up displaying my site on the 1280 x 1024 screen in DMS and noticed the content width was now 800px.  I dragged it to my 1920 x 1080 screen and it becomes 1200px wide.


Should a pixel width not be a pixel width?  I'm confused as to why this behaviour is occuring.  It might be intended but it's causing me some issues with layout.


Can you shed any light?





Share this post

Link to post
Share on other sites



Can you provide a link to the site in question please, so I can take a closer look.

Please search our forums, before posting!

Share this post

Link to post
Share on other sites

The page is:




And I have used my wide monitor to set it at 1200px wide.  If I drag the Chrome window to my older squarer monitor it automatically resets the width to 800px to fit.  If I then save a change it saves that setting and the site looks 800ox thin on all monitors.


I am in the process of setting the image on the right to resize but am waiting on some images from our designer at the mo.


I guess the only way to test this is to have two monitors of different resolutions, I could try to take a screen grab if that helps?



Share this post

Link to post
Share on other sites

  • Similar Content

    • Jared Smith
      By Jared Smith+
      I'm trying to make a visible border around the entirety of a client's site.  Example on some other site here:

      So it is around the Title, Menu, and Content Area.  I'm having a bit of difficulty with this on pagelines, using the Framework theme. It's slightly more complex because the site has a "landing page" that doesn't need the border. Much like this homepage
      Right now I'm using a content width of 80%, and fullscreen.  But maybe thats not the best way to do it.  
      So, with the #site id, I can hit the whole area on most of the site, but I'm not sure how I can remove it for just one page.
      #site { border:1px solid #ccc; margin: 100px 5% 5% 50px; } anyone have any suggestions?  Maybe I need to go make a child template, not sure?  Thanks!
    • micstepl
      By micstepl+
      the %-setting fo "content width"  (in "Settings" > "Content With")
      is incorrect (differs) on different screen size on mobile it looks eben significant   see a screen size comparison
      I made the test with 90% (simple screenshots) all section settings - set to default see attachment  

    • lazlo
      By lazlo
      Hi, Has anyone created a content-width Rev Slider?