2 columns of links in a box

  • Unknown's avatar
    vanguardhq · Member ·

    Hello :)

    We are trying something out on our test site on this page: https://01handshake01.wordpress.com/systems-view-of-sub-optimisation/

    We have adapted some CSS from this page on our company’s live site: http://vanguard-method.net/newsletter/

    The two columns on our test site page aren’t quite filling the whole width of our page. I am wondering if this is because we’re trying to adapt CSS that was originally designed to do something different – i.e. present a list of links spanning the width of the box.

    Please could you help us with the CSS: we still want to retain the grey box with the black outline but can’t sort out how to get two columns of links equally spaced across the box.

    Both our test site and our live site use the Portfolio theme.

    Hope that makes sense!
    Many thanks
    Sarah

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Sarah, I think the code you are using is fine for this purpose. The only thing I see is a float right on the right side of the bottom panel with Software fault… I would change that to left so that on smaller screens, when they move to vertical alignment they are all in the same column.

    The other thing I would suggest is that we move the code you are using to CSS classes instead of putting it in the divs inside the page content. The reason I suggest this is that we can then create a media query that will shift the width of your two columns to 100% at 528px on narrower screen/windows so that the text doesn’t wrap. Here is what you would do.
    1. Add the following to your custom CSS 

    .van-col {
    padding: 0 40px 0;
    width: 40%;
    float: left;
}
@media screen and (max-width: 528px) {
    .van-col {
        width: 100%;
    }
}

    2. Remove the style attributes from your divs and add a class to the divs like this:
    <div class="van-col">

    The alignment, as you have it now seems pretty good and visually works. If you wanted the right items closer to the right edge, we could go further with the above and float the right ones right and then at 528px and narrower change them to float left.

    See what you think with the above changes and we will go from there.

  • Unknown's avatar
    vanguardtestuser · Member ·

    Hi

    Thanks very much for suggesting these changes in the custom CSS and the style attributes. I’ve added the custom CSS and changed the code on the page but the results are still one column (not two) https://01handshake01.wordpress.com/systems-view-of-sub-optimisation/

    Have I got everything correct? I’m thinking that I’ve missed something!

    Many thanks
    Sarah

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, I took a look at your code, and what you need to do is to keep the different left and right sections in their own divs with the class declarations.

  • The topic ‘2 columns of links in a box’ is closed to new replies.