Results 1 to 2 of 2
  1. #1
    Join Date
    Dec 2011
    Posts
    92
    Plugin Contributions
    0

    Default Prevent alignment issues in product listing pages when product title lengths differ

    Hi,

    I am hoping someone can help me with this styling issue. I have my product listing pages set up to dsplay in columns rather than rows and am having some alignment issues.

    For example depending on the length of the product name it will either all fit on one row or will wrap round onto a second row. This is as expected, however when you have products next to each other with different product name lengths the alignment looks a little untidy.

    This is a link to the page I am working on

    w w w. o u r l i t t l e c o t t a g e s h o p . c o . u k / h e a r t s

    I have fixed the height of the div that the products sit in so that the bottom of the box does not shift up and down. However the add to cart button and quantity box still shift up and down dependent on the product name length. I cannot work out how to fix it so that the area the title sits in is always two rows (my image titles are never going to be long enough to fill three). I thought if I fixed the title area to always be enough for two rows then everything will always line up.

    Can anyone offer any help please?

    Many thanks

  2. #2
    Join Date
    Oct 2011
    Location
    Toronto Canada
    Posts
    67
    Plugin Contributions
    0

    Default Re: Prevent alignment issues in product listing pages when product title lengths diff

    I looked at your site and it seems you fixed this? How did you get it right - I am having the exact same problem when product names go onto 3 lines when the rest are only on 2.


    Quote Originally Posted by OLCS View Post
    Hi,

    I am hoping someone can help me with this styling issue. I have my product listing pages set up to dsplay in columns rather than rows and am having some alignment issues.

    For example depending on the length of the product name it will either all fit on one row or will wrap round onto a second row. This is as expected, however when you have products next to each other with different product name lengths the alignment looks a little untidy.

    This is a link to the page I am working on

    w w w. o u r l i t t l e c o t t a g e s h o p . c o . u k / h e a r t s

    I have fixed the height of the div that the products sit in so that the bottom of the box does not shift up and down. However the add to cart button and quantity box still shift up and down dependent on the product name length. I cannot work out how to fix it so that the area the title sits in is always two rows (my image titles are never going to be long enough to fill three). I thought if I fixed the title area to always be enough for two rows then everything will always line up.

    Can anyone offer any help please?

    Many thanks
    Lead•Empower•Motivate
    Catherine S.
    Go2Guru

 

 

Similar Threads

  1. v151 How to set a character limit for product title when in product listing mode?
    By gabriel2506 in forum Templates, Stylesheets, Page Layout
    Replies: 7
    Last Post: 6 Jan 2015, 03:39 PM
  2. Product Listing image alignment issues.
    By Rahbi in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 1 Jun 2012, 03:15 AM
  3. changing colour of category title on product listing and info pages
    By Sushigal in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 21 Jun 2010, 06:54 PM
  4. Strange alignment issues on product info page
    By jpmagee in forum Templates, Stylesheets, Page Layout
    Replies: 4
    Last Post: 25 Mar 2010, 11:04 PM
  5. Alignment issues on only 1 of my 100+ product pages. How to Fix?
    By sfklaas in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 18 Jan 2010, 04:16 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR