20i Reseller Hosting

CSS issue

Discussion in 'Scripts and Coding' started by bensd, May 14, 2016.

  1. bensd United Kingdom

    bensd Well-Known Member

    Joined:
    Jan 2007
    Posts:
    5,034
    Likes Received:
    61
    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?
     
  2. Domain Forum

    Acorn Domains Elite Member

    Joined:
    1999
    Messages:
    Many
    Likes Received:
    Lots
    articles.co.uk
     
  3. martin-s United Kingdom

    martin-s Well-Known Member

    Joined:
    Jul 2012
    Posts:
    3,347
    Likes Received:
    226
    The simplest fix might be to put a line-height on the price element
     
  4. Adam H

    Adam H Well-Known Member Exclusive Member

    Joined:
    May 2014
    Posts:
    1,611
    Likes Received:
    219
    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.
     
  5. Adam H

    Adam H Well-Known Member Exclusive Member

    Joined:
    May 2014
    Posts:
    1,611
    Likes Received:
    219
    Scrap that, doing the above messes up things lower down slightly , although you could break those two sections with slightly different max-widths
     
  6. seemly

    seemly Well-Known Member

    Joined:
    Feb 2011
    Posts:
    1,227
    Likes Received:
    193
    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.