CSS issue

[bensd]

I am helping a family member with their new website and having an issue with the following:

www. chestnutcaterers .co.uk/new/business-lunches/

If the item description is over two lines then the dashed line appears under the price not running up to it.

Any ideas how to fix this?

 

[martin-s]

The simplest fix might be to put a line-height on the price element

 

[Adam H]

Could put max-width to 100% in the following so that the line follows the end of the block like its suppose to using the pseudo element :

.gk-menu-container dd small {
max-width: 100%;
}

The only trouble with that is it then looks like its an underline on things like the Savoury Croissant description......but imo that looks better than what you currently have.

 

[Adam H]

Scrap that, doing the above messes up things lower down slightly , although you could break those two sections with slightly different max-widths

 

[seemly]

my changes:

.gk-menu-container dl dd {
position: relative;
}
.gk-menu-container dd:after {
left: 0;
position: absolute;
top: 14px;
height: 1px;
}

Because of the use of %'s for responsive layout, there are times when the dashed line doesn't look great (only shows like 2 dashes), but that is the failing of the design/layout, unfortunately.
At least with the changes above, the dashed line displays where expected - consistently.