Modify your Joomla modules to make them full-width

Last Updated:
Customization Tips

If you want to use the “Full Width” option for a Joomla! module without keeping space around (up – down – left – right) – you have to use additional suffix (class) or override default Gavick template style, but second method would be more practical especially if you want to use for whole site. Both solutions should works in most cases but it depends of module position in template.

Before - Default paddings

Before – Default paddings

Example CSS code for Header position

#gkHeader .gkPage { max-width: none; width: 100%;}
#gkHeader { padding: 0; }

Example CSS code for Bannertop position

#gkBannerTop .gkPage { max-width: 1920px; width: 100%; }
#gkBannerTop { padding: 0; }

Note: The max-width property is used to set the maximum width of an element. This prevents the value of the width property from becoming larger than max-width. In Gavick templates we are using specific value from configuration. That’s why We shown you technique to override & compensate value determined in the template configuration.

After - 100% width, no paddings

After – 100% width, no paddings

After after adding and activation style your module widths will automatically adjust to screen size depending on the content wide.

Modify your Joomla modules to make them full-width 4.295 (85.71%) 7 votes

This article was first published

Villa Belluci - View our NEW theme

Tutorials & tips delivered regularly

Expand your purchase with regular tutorials and tips to making your site better, direct to your email.