Theme Layout Issue

[omgzhobbs]

Allo,

So I've got a little lost on what could be causing this layout issue.. I have tried shrinking the title text and padding in CSS, same with the price, size and padding shrunk down and yet the same issue stays..

Could it be how I am writing my product titles?  Is there a way CSS can shorten these automatically, or just force it to fit into the area?

Thanks in advance for the help!

Here is a link to a page with the issue: http://www.zappies.com/737-outdoors-garden

and I have attached a image of the issue.

 

anything else anyone needs to know, please ask

Edited January 17, 2014 by omgzhobbs (see edit history)

[vekia]

hello

 

it's a part of .tpl files, you've got there |truncate modifier near product name, this causing your problems.

if i were you - i will define height param for product name:

 

zappies.css line 43

h4 {
font-size: 1.4em;
height: 170px;
}

effect:
 

h4 {
font-size: 1.4em;
height: 170px;
}

[awesumdigital]

You need to assign a height to productlist li a in your css, i.e the H4 tag. I tried 170px and it worked well.

 

1. height: 170px;

Edited January 17, 2014 by awesumdigital (see edit history)

[omgzhobbs]

Amazing, worked a charm!  Didnt even think to define the height.

Thanks again for such speedy help from both of you nearly getting there now! 

Thanks again!

Edited January 17, 2014 by omgzhobbs (see edit history)

[omgzhobbs]

Hmmm slightly issue, having ' height: 185px;' in the h4 tag causes the title on the homepage for featured products to also have the height apply to it, making the top header stretch across the page.. any other ideas on avoiding this?

Here is a screenshot;

 

 

Sadly I cannot leave the issue on the live site as customers will end up complaining haha

[awesumdigital]

Add the following to the bottom of your global.css:

 

#product_list h4{

height:175px;

}

 

(or 185px, whatever your preference is)

Edited January 17, 2014 by awesumdigital (see edit history)

[omgzhobbs]

Add the following to the bottom of your global.css:

 

#product_list h4{

height:175px;

}

 

(or 185px, whatever your preference is)

 

 

Ace thanks!  This solved the issue.

 

Thanks again.