• Resolved cfabrice

    (@cfabrice)


    I’m trying your plugin on canvas, brand new, I created 3 features,
    but they are displayed vertically instead of horizontally in a row.
    I’ve set the widget correctly I think and in the code, there is a class of last in the third features displayed and in the css there is the clear:right associated with that class.
    Strange ! Any idea ?

    http://wordpress.org/extend/plugins/features-by-woothemes/

Viewing 15 replies - 1 through 15 (of 18 total)
  • Plugin Author Matt Cohen

    (@mattyza)

    Hi cfabrice,

    Thanks for your query. πŸ™‚

    To start, you’d need to float the items to the left. From there, the rest should take care of itself. πŸ™‚

    For example:

    .features .feature { float: left; }

    Please advise if this produces the desired result. πŸ™‚

    Thanks and regards,
    Matty
    [ Signature moderated. ]

    Thread Starter cfabrice

    (@cfabrice)

    I added this to my CSS but the features didn’t float… Until I gave them a width πŸ˜‰
    Thank you !

    Hi cfabrice, Trying to achieve the same.

    Have added shortcode

    [woothemes_features per_row=”2″ limit=”2″]

    and CSS

    .features .feature { float: left; }
    .features .feature.last {margin-right:0;padding-right:0}

    Would be a great help if you could expand on how you managed to get feature to display horizontally in a row.

    Thanks in advance,
    Paul

    Plugin Author Matt Cohen

    (@mattyza)

    Hi Paul,

    If you’ve got 2 features per row, you can set the width of “.features .feature” to be 48% and then put a margin-right or 1%.

    This should fit the features neatly. πŸ™‚

    Regards,
    Matty.

    Hi Matty,

    Thanks for the help. Excuse my novice skill, but, not sure how to add that to the CSS. Could you please provide the correct code.

    Thanks again,

    Paul

    Plugin Author Matt Cohen

    (@mattyza)

    Hi Paul,

    No problem. Please see the updated CSS below:

    .features .feature { float: left; width: 48%; margin-right: 1%; }
    .features .feature.last { margin-right: 0; padding-right: 0; }

    Regards,
    Matty.

    Working a treat. You’re a champ πŸ˜‰

    I assume you can just adjust width according to the number of features you have on a row ie 31% for 3 and 23% for 4.

    Really appreciate you help and quick response.

    Cheers,

    Paul

    Plugin Author Matt Cohen

    (@mattyza)

    Thanks Paul.

    Yes, the width can be adjusted accordingly. That’s correct. πŸ™‚

    Regards,
    Matty.

    Hi Matty,

    Thanks again for your help.

    I have the features rendering well now.

    I’d like to display the formated text and images as entered in the feature editor rather than plain text, is there any way to do this?

    Cheers,
    Paul

    Plugin Author Matt Cohen

    (@mattyza)

    Hi Paul,

    This has been listed as an issue, to be addressed in the next development cycle for the plugin.

    All reported issues can be found on GitHub here: https://github.com/woothemes/features/issues?state=open πŸ™‚

    Thanks and regards,
    Matty.

    Thanks for the update. Look forward to the next development cycle.
    Cheers,
    Paul

    In the examples above, where (files, locations) should I put this:

    [woothemes_features per_row="2" limit="2"]

    What about this:

    .features .feature { float: left; }
    .features .feature.last {margin-right:0;padding-right:0}

    Thanks!

    Thread Starter cfabrice

    (@cfabrice)

    First one in your page/post content directly in the post/page wordpress editor
    Second one in the css file of your theme, or in a field dedicated to customize your theme for custom css !

    Plugin Author Matt Cohen

    (@mattyza)

    Hi Nathan,

    I can confirm that cfabrice is correct. The first code goes into your page/post content, and the CSS goes into the stylesheet in your theme. πŸ™‚

    Thanks and regards,
    Matty.

    How do I repeat the same thing for three features? I thought this would work:

    #features .feature.first {
      float: left;
      width: 32%;
      margin-right: 1%;
    }
    
    #features .feature {
      float: left;
      width: 32%;
      margin-right: 1%;
    }
    
    #features .feature.last {
      float: left;
      width: 32%;
      margin-right: 0%;
    }

    … and the first two are in the same row, but the last one is still in a separate row.

    Thoughts? http://www.stoicdigital.com

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘impossible to have features in row’ is closed to new replies.