Word Press Code needed

Discussion in 'Programming & Software Development' started by pepsimax, Dec 15, 2017.

  1. pepsimax

    pepsimax Member

    Joined:
    Oct 24, 2008
    Messages:
    1,681
    Location:
    The Shire
    Not sure if this is the right thread but I have a website where I need some coding expertise to help align essentially 'more info' click boxes.

    So there is an image text and then the more info box.

    But it looks like the text is present to keep the more info boxes aligned with 3 lines of text. However two lines of text displace the more info tabs.

    Anyone know the code I should input?
     
  2. waltermitty

    waltermitty Member

    Joined:
    Feb 19, 2016
    Messages:
    728
    Location:
    BRISBANE
    Post pix, links or code
     
  3. OP
    OP
    pepsimax

    pepsimax Member

    Joined:
    Oct 24, 2008
    Messages:
    1,681
    Location:
    The Shire
    edit - updated with an image would I need to go into the code and use <br/>

    [​IMG]
     
    Last edited: Dec 15, 2017
  4. ni9ht_5ta1k3r

    ni9ht_5ta1k3r Member

    Joined:
    Feb 11, 2006
    Messages:
    32,600
    Location:
    地球・オーストラリア・シドニー
    In this case I would have the text contained within a div and set a fixed height on that div, but that means you'll have to determine the max number of lines of text you want have.

    adding padding to text doesn't work because it'll affect all with the same class and it'll push everything out of whack.

    Like below:

    The dotted lines are your DIVs that you have applied a fix or a max height in px. you can then apply things like margins to give space between button and other media.

    [​IMG]
     
    Last edited: Dec 17, 2017
  5. neRok

    neRok Member

    Joined:
    Aug 19, 2006
    Messages:
    2,658
    Location:
    Perth NOR
    That's a scenario that traditionally CSS hasn't been very good at. You would either have to use fixed height like ni9ht_5ta1k3r says, or get funky with tables. But these days you can use flexbox alignment, making this easy as! Chuck the following code into a html file to see it in action.

    HTML:
    <head>
        <style>
            .wrap {
                display: flex;
                margin: 0 auto;
                width: 900px;
            }
            .box {
                border: 1px solid;
                margin: 10px;
                padding: 10px;
                width: 33%;
               
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            .box button {
                margin-top: auto;
            }
        </style>
    </head>
    
    <body>
    
        <div class="wrap">
    
            <div class="box">
                <b>Title</b>
                <p>Lorem ipsum dolor sit amet</p>
                <button>Button</button>
            </div>
    
            <div class="box">
                <b>Title</b>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
                <button>Button</button>
            </div>
    
            <div class="box">
                <b>Title</b>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <button>Button</button>
            </div>
    
        </div>
    
    </body>
    
     
  6. ni9ht_5ta1k3r

    ni9ht_5ta1k3r Member

    Joined:
    Feb 11, 2006
    Messages:
    32,600
    Location:
    地球・オーストラリア・シドニー
    There are many ways to skin a cat and none of them a wrong LOL
     

Share This Page