Margin and padding

  • Resolved xmarksthespot

    (@xmarksthespot)


    2 years, 4 months ago

    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 2 years, 4 months ago by xmarksthespot.
Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Code Amp

    (@codeamp)

    Hi @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

    (@xmarksthespot)

    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 2 years, 4 months ago by xmarksthespot.
    Plugin Author Code Amp

    (@codeamp)

    Do you have a link I could look at?

    Thread Starter xmarksthespot

    (@xmarksthespot)

    I have set up a temporary page: https://d.xmarksthespot.co.uk/test-layout/

    Plugin Author Code Amp

    (@codeamp)

    Hey @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

    (@xmarksthespot)

    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

    (@codeamp)

    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

    (@codeamp)

    Hey @xmarksthespot , we’ve just released 1.4.8 – which provides grid gap, margin, and padding controls (as well as background color).

    Read more here – 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.