WordPress.org

Ready to get started?Download WordPress

Forums

Features by WooThemes
How Do I Center Align Features in page (8 posts)

  1. pelgen
    Member
    Posted 1 year ago #

    Ive just installed the Features plugin in the new One Pager theme from woocommerce. Instead of the four features in the theme I am configuring using three. However they are all left aligned instead of simply equal spacing themselves across the page.

    I'v adding the features to the home page using the widget functionality.

    Ive set the widget to display three per row as per the screenshot below

    https://www.evernote.com/shard/s2/sh/01b82c9c-833d-476d-b5ab-e6dc6e05c803/78aaba69ea0b20f1b96aca434cbd4411

    Is this the normal behaviour? How to I get the three to be equally spaced across the page? http://personality.onlinekickstart.com/

    Thanks
    Ed

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

  2. pelgen
    Member
    Posted 1 year ago #

    Still unsolved for the moment. I've had to add another "feature" as 4 is the only number that fits the width of the page perfectly.

  3. sjefx
    Member
    Posted 1 year ago #

    Hi Pelgen, I am busy with same thing with the same theme. I solved it with custom css in a child-theme I made for One Pager.

  4. Edward Spek
    Member
    Posted 1 year ago #

    Hi pelgen,

    I've just started playing with this in the Canvas theme by Woothemes.

    I'm only able to get the features to appear in a vertical list instead of horizontally across the page.

    How are you achieving that or am I doing something wrong?

  5. sjefx
    Member
    Posted 1 year ago #

    Hi, these are the CSS elements I use in Woo Themes The One Pager Theme to display 3 features and 3 testimonials aligned on the homepage.

    /* Features By WooThemes Widget */
    .widget_woothemes_features .feature {
    float: left;
    width: 29.8%;
    margin-right: 0;
    margin-left: 5.3%;
    }

    .widget_woothemes_features .feature.first {
    margin-left: 0;
    }

    /* Testimonials By WooThemes Widget */
    .widget_woothemes_testimonials .quote {
    float: left;
    width: 29.8%;
    margin-right: 5.3%;
    }

  6. gosingk
    Member
    Posted 1 year ago #

    Really wish the dev to solve this issue, e.g. auto resize the width of each feature or testimonial item based on the 'per_row' parameter...

  7. dynamicoils
    Member
    Posted 11 months ago #

    @sjefx: Thank you for the code, now the next issue. When I dump that into my custom CSS the mobile renders with the features across the screen instead of as separate items vertically, which is how they render with the 4-to-a-row original CSS. Thoughts?

  8. sjefx
    Member
    Posted 11 months ago #

    @dynamicoils: I did not really look at that, but is has to do with media queries. I used the widget shortly in the WOO One pager theme. Now the default design in that theme is for a small screen with features vertically aligned (width=100%). When the size is above 768px it changes to horizontal aligned features (width=29.8% with 3 features). When this is also the case in the theme you are using, it depends on where you paste the above CSS. The settings above should only overrule the CSS meant for a screensize of 768px and above.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.