0

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

ptrcao
  • 421
  • 1
  • 5
  • 19

1 Answers1

1

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;
Jerome Indefenzo
  • 967
  • 6
  • 25
  • Forgive me but where does the 55px come from...? – ptrcao Dec 14 '17 at 05:27
  • 1
    The 40px came from the padding of div#main, the 15px is just a hardcoded buffer so the rounded white rectangle fits 100% of the width on my screen. You might actually be better off using a bigger value, say 64px to account for devices with wider scrollbars. For some reason, the page isn't taking into account the scrollbars. – Jerome Indefenzo Dec 14 '17 at 05:40
  • 1
    Actually I think I found the problem, wait a moment. – Jerome Indefenzo Dec 14 '17 at 05:40
  • 1
    Edited my answer. Use the updated modifications. The `div#page` being `display: table` was ruining the whole layout. – Jerome Indefenzo Dec 14 '17 at 05:44
  • Solution acceptable. Originally, there was a reason I was avoiding vw - it's known to include the scrollbar, but a solution to that problem can be found [here](https://stackoverflow.com/questions/33606565/is-it-possible-to-calculate-the-viewport-width-vw-without-scrollbar). Would this resolve your issue that you were trying to fix with the extra 15px? – ptrcao Dec 14 '17 at 05:55
  • 1
    Shouldn't break with scrollbars using the edited answer. The `display: table` was definitely just the culprit. – Jerome Indefenzo Dec 14 '17 at 05:58