Unable to properly position an UL on product pages

Hi there

Inching (or, since I'm in Canada, I should say "millimetering") my way closer to completing a new store site powered by MarketPress, but I'm still having some problems.

This one, I suppose, relates to an earlier post I made about formatting problems on product pages. Basically, it appeared that text formatting (p, ul, li) was being stripped out.

Anyway, I managed to overcome most of the problems with some custom CSS that I added to the theme I'm using (Catalyst, with Dynamik child).

The only one I haven't had any luck with yet is the unordered list. Basically, it simply sits right up against the featured image of the product, with no margin whatsoever, so it looks like crap.

I've tried everything I can think of - margin-left, paddng-left, negative margin right, floating the element to the right, absolute positioning - and it either doesn't work or it has consequences for other elements.

I've added some custom CSS (margin-right) to the featured image to add the necessary separation between it and the text, but nothing I do (other than to give it a margin left of 550px or something like that) will move the UL so that it sits properly (indented within the paragraph block).

The 550px "solution" was not adequate for a couple of reasons - not the least of which is that the site is using responsive design so on a mobile device that margin totally threw things off.

Anyway, here's a link to a page on the test installation to show you what's going on: http://powderbluebijoux.dawsonbarber.com/store/products/bridal-fascinators-sydney

Any advice would be much appreciated.

Thanks

Dawson

  • aecnu

    Greetings Dawson,

    I totally agree with your assessment of how it looks and though I am not permitted to be as colorful as you were with the description, I do agree it is unsightly to say the least and further agree there must be a way to straighten this out.

    I am somewhat wondering if this is theme related because I do not experience this on my own personal site, but I am using the Grid Market theme - this is why my thought that it may be theme related though at the same time if you are using short codes then this thought is out of mind?

    Please advise if you are using short codes to render your products within your theme.

    Cheers, Joe

  • dawsonbarber

    Hi Joe

    Thanks for your reply. Glad to hear you agree with my assessment, although in slightly different terms...lol.

    Products aren't being added by shortcode. I'm typing the description straight into the product page and then styling the key points with bullet points in the WP text editor.

    I just tried to replace the list-style with a background image. No luck. While I can remove the list-style-type from the bullet points, the background images meant to replace them are sitting about 550px to the left, underneath the (I "z-indexed" them to see).

    Dawson

  • Patrick

    Hi Dawson,

    On line 2 of dynamic-min.css, change this:

    .entry-content p, .entry-content ul li, .entry-content ol li {
    margin-bottom:10px;
    }

    ...to this:

    .entry-content p, .entry-content ul li, .entry-content ol li {
    margin-bottom:10px;
    list-style:inside;
    }

    You can also modify the bullet style by appending any one of the following to list-style:inside;
    disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha (plus a few language-specific bullet types like hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha)

    For example, list-style:decimal-leading-zero inside; would give you something like this:

    01. First point
    02. Second point
    03. Third point
    ...

    Here's a handy reference for lists: http://www.w3schools.com/cssref/pr_list-style-type.asp

    Hope this helps! :slight_smile:

  • dawsonbarber

    pcwriter

    I told you I'd be back!

    Thanks very much for this, and for the extra thought that went into this.

    Between my last post and catching yours, it occurred to me that since WordPress (whether as a function of WordPress itself or a conflict between the theme and MarketPress) seemed to be able to only use the left-most margin of the page as the baseline for the textual elements, perhaps aligning the image to the right would be a more direct way of going after the problem.

    No surprise, that's got the list working the way it should.

    That said, even though I know that split testing should be the ultimate decision maker, what do - and others - think about a right-aligned product image? Does anyone have any experience/testing they could share?

    Anyway, pcwriter, thank you again for your assistance on this. Between your solution, a solution that was offered on the Catalyst forum, and my own "duh" moment, I've now got three options to choose from.

    Cheers,

    Dawson (I'll be back)

    PS Just wanted to say that I'm really happy with my decision to purchase a WPMU membership. Awesome products, so many to choose from, and a great community.

  • Patrick

    Hi Dawson,

    Simply aligning the image to the right won't change anything with respect to the list bullets. Your theme just doesn't specify the list position which, by default, is outside. Using the code above will ensure the bullets sit inside the container element.

    As to the effectiveness of aligning the product image to the right, that's a rather moot question given the size of your main product image. :wink: But in terms of the impact various elements of design layout can have, that would really depend on what aspect(s) of the product listing you want to highlight. In most Western cultures, our eyes naturally scan from top-left to bottom-right of any page. Placing the image on the right would give more "weight" to the textual element of the layout, whereas aligning the image on the left would tend to give it precedence.

    From a marketing perspective, the wiser choice would be to place whatever element would tend to "hook" readers into wanting more on the left. So, choose whichever element you consider more important, image or description.

    Aesthetically speaking, the question then becomes: do I want my product image to be a secondary element in my layout, or do I want to draw readers in with a visual?

    But you are right, if you want a better indicator on what layout type is more effective when it comes to sales, split testing is the way to go.

  • aecnu

    Greetings Dawson,

    Happy to hear that you got things aligned to your satisfaction and as pcwriter told once again told words of wisdom and testing that the western cultures scan from top left to bottom right and he is spot on.

    This was also proven with Google heat maps that followed many a test subjects eyes to see what they were doing.

    @pcwriter another job well done sir and your follow up exceptional. Rep points coming your way.

    Cheers, Joe

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.