Cette extension n’a pas été testée avec plus de trois mises à jour majeures de WordPress. Elle peut ne plus être maintenue ou supportée et peut avoir des problèmes de compatibilité lorsqu’elle est utilisée avec des versions de WordPress plus récentes.

ASD Fullwidth Element Sizer


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 »>

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.

Captures d’écran

  • Without ASD Fullwidth Element Sizer
  • With ASD Fullwidth Element Sizer


Manual installation

At a command prompt or using a file manager, unzip the .ZIP file in the WordPress plugins directory, usually ~/public_html/wp-content/plugins . In the In the WordPress admin Dashboard (usually http://yoursite.foo/wp-admin ) click Plugins, scroll to ASD Fullwidth Element Sizer, and click « activate ».

Upload in Dashboard

Download the ZIP file to your workstation. In the WordPress admin Dashboard (usually http://yoursite.foo/wp-admin ) Select Plugins, Add New, click Upload Plugin, Choose File and navigate to the downloaded ZIP file. After that, click Install Now, and when the installer finishes, click Activate Plugin.


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. These attributes can be readily found using the Inspector tools in Firefox and Chrome.


12 avril 2020
Quick & simple but the timer delay in the js had the element visibly re-positioning left during page loading I found a better css approach
Lire l'avis

Contributeurs & développeurs

« ASD Fullwidth Element Sizer » est un logiciel libre. Les personnes suivantes ont contribué à cette extension.



2.201902051 2019-02-05

bugfix: global $asd_fullwidth_element_sizer_version, for correct scope

2.201901281 2019-01-28

Submodule update, updated codesniffer audit.

2.201812101 2018-12-10

Now utilizing submodule framework.

2.201808261 2018-08-26

First release candidate.