Search code examples
htmlcsslayoutwidthviewport

Unable to force website to fit to screen width

I can't make my website fit to the screen. I don't know what is resisting my max-width 100% rules across all the higher level divs. I don't really use fixed widths for the most part; only percentage widths below and up to 100%. The website begins to resist horizontal reduction at about 773 pixels horizontally.

Just for clarity, there is a media query-facilitated a break point which shifts the sidebar below the main content at 600px screen width, and another break point at 1024px wide+, in which I purposely allow black margins on either side as the screen becomes quite broad. However, it is in the range of 1024px and below with which I'm concerned. Strangely, the container div#super-content does not seem to want to resize below 712px width, and I can't understand why. Is some child resisting? It isn't obvious which one.

The bottom line is I want my content to fix to any and all screen sizes below 1024px. Please help me identify the resisting elements - they must be made compliant. There is to be no horizontal scrolling at 1024px screen width and below; content should expand vertically, and never overflow horizontally.

Website here.

Edit: I am under the impression that WordPress images will scale dynamically, and therefore, I assume they are not the culprits here. But while their behaviour is not always consistent to me, I have seen WordPress images, with and without captions, scale responsively here and elsewhere.

enter image description here

Solution

  • I think the most apparent problem here is the use of display: table excessively even on objects that didn't need to be displayed as a table.

    For your <div id="page">:

    display: block !important;

    For your <div id="main">:

    display: block !important;
width: calc(100% - 40px) !important;

    For your <div id="super-content">:

    display: block !important;