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?
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.
Scrap that, doing the above messes up things lower down slightly , although you could break those two sections with slightly different max-widths
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.