无法强制网站适合屏幕宽度 [英] Unable to force website to fit to screen width

问题描述

我无法将我的

解决方案

我认为这里最明显的问题是使用 display：table 对于不需要显示为表格的对象甚至过分。

对于您的< div id =page> ：

  display：block！important; 
  

您的< div id =main> ：

  display：block！important; 
 width：calc（100％ -  40px）！important; 
  

对于您的< div id =super-content> ：

  display：block！important; 
  

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.

解决方案

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;

这篇关于无法强制网站适合屏幕宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！