Title: Margin and padding Last modified: July 9, 2022 --- # Margin and padding * Resolved [xmarksthespot](https://wordpress.org/support/users/xmarksthespot/) * (@xmarksthespot) * [3 years, 11 months ago](https://wordpress.org/support/topic/margin-and-padding-2/) * Just looked at this plug-in today for the first time, so apologies for the newbie question. * I want to display woocommerce products and have got this working, with different layouts for desktop, tablet and mobile. My website has a boxed layout * When I set the gap at 30px between items (on desktop, say), a 30px vertical and 30px horizontal gap between products is added, as expected. However, this also seems to have the effect of adding a 30px margin, when I want the products to be the full width of the box. * This is the case for all devices – so if I add a 50px gap on mobile in a single column layout then I get a 50px gap between products but I also get a 50px margin. * How do I achieve the full boxed width please? - This topic was modified 3 years, 11 months ago by [xmarksthespot](https://wordpress.org/support/users/xmarksthespot/). Viewing 8 replies - 1 through 8 (of 8 total) * Plugin Author [Code Amp](https://wordpress.org/support/users/codeamp/) * (@codeamp) * [3 years, 10 months ago](https://wordpress.org/support/topic/margin-and-padding-2/#post-15838048) * Hi [@xmarksthespot](https://wordpress.org/support/users/xmarksthespot/) * We’re looking to add a fix for this, but for now you could add this custom CSS to remove the gaps at the side: * ``` .cl-layout { margin-left: -50px; margin-right: -50px; overflow: hidden; } ``` * Let me know if that works for you? * Thanks * Thread Starter [xmarksthespot](https://wordpress.org/support/users/xmarksthespot/) * (@xmarksthespot) * [3 years, 10 months ago](https://wordpress.org/support/topic/margin-and-padding-2/#post-15851981) * Thank you, but it didn’t work fully. * The gap on the left is removed, but the gap on the right remains. In fact, changing the value of margin-right to something other than -50px appears to make no difference. - This reply was modified 3 years, 10 months ago by [xmarksthespot](https://wordpress.org/support/users/xmarksthespot/). * Plugin Author [Code Amp](https://wordpress.org/support/users/codeamp/) * (@codeamp) * [3 years, 10 months ago](https://wordpress.org/support/topic/margin-and-padding-2/#post-15857300) * Do you have a link I could look at? * Thread Starter [xmarksthespot](https://wordpress.org/support/users/xmarksthespot/) * (@xmarksthespot) * [3 years, 10 months ago](https://wordpress.org/support/topic/margin-and-padding-2/#post-15857373) * I have set up a temporary page: [https://d.xmarksthespot.co.uk/test-layout/](https://d.xmarksthespot.co.uk/test-layout/) * Plugin Author [Code Amp](https://wordpress.org/support/users/codeamp/) * (@codeamp) * [3 years, 10 months ago](https://wordpress.org/support/topic/margin-and-padding-2/#post-15863056) * Hey [@xmarksthespot](https://wordpress.org/support/users/xmarksthespot/) * I managed to figure this out: * ``` .cl-layout { margin-left: calc( var( --cl-layout-spacing ) * -1 ); width: calc( 100% + ( var(--cl-layout-spacing) * 2 ) ); } .cl-layout:not(.alignleft):not(.aligncenter):not(.alignright):not(.alignwide):not(.alignfull) { max-width: calc( 100% + ( var(--cl-layout-spacing) * 2 ) ); } ``` * I’m putting this on the todo list for the plugin, I think we will switch to CSS Grid and solve it withing the plugin at some point in the future. * Thanks * Thread Starter [xmarksthespot](https://wordpress.org/support/users/xmarksthespot/) * (@xmarksthespot) * [3 years, 10 months ago](https://wordpress.org/support/topic/margin-and-padding-2/#post-15863115) * Thank you, this works. * Is the gap between columns a single setting that applies to all devices? If so, when you’re considering changes, then I think it would improve the product if it was possible (when required) to set a different column gap for each device screen size, i.e. large/medium/small/extra small. * Plugin Author [Code Amp](https://wordpress.org/support/users/codeamp/) * (@codeamp) * [3 years, 10 months ago](https://wordpress.org/support/topic/margin-and-padding-2/#post-15863985) * Thanks for the feedback. * Yeah the gap is currently only one size. * We’re holding off a little on the responsive options until we see what direction Gutenberg takes – so we can keep in sync with their UI (they have some open github issues about this sort of thing already / in progress) * If nothing happens in the next few months we’ll surely start rolling out our responsive UI (like you get with the number of columns) to a bunch of other settings. * Thanks * Plugin Author [Code Amp](https://wordpress.org/support/users/codeamp/) * (@codeamp) * [3 years, 8 months ago](https://wordpress.org/support/topic/margin-and-padding-2/#post-16079786) * Hey [@xmarksthespot](https://wordpress.org/support/users/xmarksthespot/) , we’ve just released 1.4.8 – which provides grid gap, margin, and padding controls ( as well as background color). * [Read more here](https://customlayouts.com/release-1-4-8-grid-gap-layouts/) – and you probably want to remove the custom CSS to fix this as it will conflict with our settings! * Best Viewing 8 replies - 1 through 8 (of 8 total) The topic ‘Margin and padding’ is closed to new replies. * ![](https://ps.w.org/custom-layouts/assets/icon-256x256.png?rev=2475457) * [Custom Layouts - Post + Product grids made easy](https://wordpress.org/plugins/custom-layouts/) * [Frequently Asked Questions](https://wordpress.org/plugins/custom-layouts/#faq) * [Support Threads](https://wordpress.org/support/plugin/custom-layouts/) * [Active Topics](https://wordpress.org/support/plugin/custom-layouts/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/custom-layouts/unresolved/) * [Reviews](https://wordpress.org/support/plugin/custom-layouts/reviews/) * 8 replies * 2 participants * Last reply from: [Code Amp](https://wordpress.org/support/users/codeamp/) * Last activity: [3 years, 8 months ago](https://wordpress.org/support/topic/margin-and-padding-2/#post-16079786) * Status: resolved