We're merging with GenerateBlocks! Learn more here.

[Resolved] Columns gutter EM

Please login to receive premium support.

Support for the free plugin can be found here.

Home › Forums › Pro Support › Columns gutter EM

Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 27, 2021 at 10:16 am #34992
    Davide
    Participant

    Hi, a client of mine had to go through the entire html of a site (don’t ask me why) and discovered the following:

    let’s take this list as an example http://woo.davidecrivelli.com/test-list-october-21/

    If I set the column gutter to 2.6em, the margin-left and the margin-right will be 1. em, the margin-botton 2.6em.

    .slick-slider#wpsp-297 {margin-left: 0px; }.slick-slider#wpsp-297 .wp-show-posts-inner {margin-left: 1. em; margin-right: 1. em; }#wpsp-297.wpsp-card .wp-show-posts-single {margin-bottom: 2.6 em; (line 102)

    instead of being 1.3em each (I guess); also 1. em is recognized as “error”.

    If I set the gutter to, let’s say 5em, they margin left and right will be correct, meaning 2.5 em each
    https://woo.davidecrivelli.com/margin-ok/ here an example

    <style>.slick-slider#wpsp-300 {margin-left: 0px; }.slick-slider#wpsp-300 .wp-show-posts-inner {margin-left: 2.5em; margin-right: 2.5em; }#wpsp-300.wpsp-card .wp-show-posts-single {margin-bottom: 5em; }

    Is this supposed to work like this or that’s (mini)bug?

    thanks!
    Davide

    October 27, 2021 at 8:24 pm #35026
    elvin
    Moderator

    Hi there,

    instead of being 1.3em each (I guess); also 1. em is recognized as “error”.

    Yes it will cause an error this way. CSS will perceive . as the unit instead of the em

    The issue may be on how the value is added.

    When adding a value, make sure there’s no space between the value and the unit.

    Example: Instead of 2.6 em, it should be 2.6em. Instead of 1. em, it should be 1em.
    https://share.getcloudapp.com/BluD5RxX

    It’s not really a bug. The column gutter field is a field for the direct CSS value of the column margins. It’s the shorthand value for margin.

    You can assign for values for top right bottom left separated by spaces. If you put too much space then the syntax breaks. 😀

    October 28, 2021 at 1:53 am #35031
    Davide
    Participant

    Hi Elvin,
    thank you for your reply.

    Example: Instead of 2.6 em, it should be 2.6em. Instead of 1. em, it should be 1em.

    I’m aware of that 😀

    What I meant is that
    screenshot one: https://www.dropbox.com/s/grxwe5fukmtzcbz/Screenshot%20from%202021-10-28%2010%3A33%3A22.png?dl=0
    screenshot two: https://www.dropbox.com/s/p9j6sowawqm9g8v/Screenshot%20from%202021-10-28%2010%3A43%3A53.png?dl=0 (that’s a screenshot of this: view-source:http://woo.davidecrivelli.com/test-list-october-21/

    There, the 2.6em is output as 1.em instead of 1.3em (for the left and the right margin). That’s what I meant (and if I put for example 3 or any other integer, I’ll have 1.5em and 1.5em).

    October 28, 2021 at 4:31 pm #35038
    elvin
    Moderator

    Ah I see what you mean. But that CSS is a bug that affects the column gutter of WPSP on a carousel only.

    The column gutter styling used by non-carousel WPSP lists is the one on the 2nd <style> tag as shown here.
    https://share.getcloudapp.com/nOu5no9k

    November 4, 2021 at 9:37 am #35247
    Davide
    Participant

    (forgot to answer),
    thanks for the reply; got it!

    cheers,
    Davide

    November 4, 2021 at 5:01 pm #35259
    elvin
    Moderator

    No problem. 😀

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.