ASD FullWidth Element Sizer

These images show WordPress 4.9.8 using theme TwentySeventeen and a Gutenberg Cover Image block.
The easy solution for making images or other HTML elements full window width!
Makes your Gutenberg Cover Image blocks ACTUALLY full window width!

Just apply the CSS class “fullwidth-element” to your existing HTML tags or Gutenberg Cover Image.


<div class="my-class fullwidth-element">
<img src="my-image.jpg" class="fullwidth-element" />
Or, In your Gutenberg page, select the Cover Image block, and edit the Advanced settings, set Additional CSS Class to “fullwidth-element” and your Cover Image now does what you always expected it to.

How it works: In the browser, window width and element size are calculated, and CSS “width” and “margin” values are applied to cause them to occupy the full width of the broswer window, no matter the size of the parent container. This process is applied to any HTML element which has the class “fullwidth-element”.

FullWidth Element Sizer also sets a timer in the browser to watch for the window width to change, and will recalculate and re-apply full width values if it does.


Q: Why is my element still not full width?
A: The usual reason is that the max-width attribute or an inline width attribute is being applied by existing CSS or inline HTML, from your theme or another plugin. These attributes can be readily found using the Inspector tools in Firefox and Chrome.