Domain Manage

CSS issue

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

  1. bensd United Kingdom

    bensd Well-Known Member Exclusive Member

    Joined:
    Jan 2007
    Posts:
    4,957
    Likes Received:
    53
    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
     
  3. martin-s United Kingdom

    martin-s Well-Known Member

    Joined:
    Jul 2012
    Posts:
    2,454
    Likes Received:
    84
    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,047
    Likes Received:
    84
    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,047
    Likes Received:
    84
    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 Active Member

    Joined:
    Feb 2011
    Posts:
    973
    Likes Received:
    39
    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.
     

Share This Page