Support » Fixing WordPress » 3 column layout responsive

Viewing 11 replies - 1 through 11 (of 11 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you provide a link to the issue?

    Thread Starter Mark Shirley

    (@ravalde)

    Hi Andrew Im working locally so I cant show you a link sorry. If you look at the example it’s just trying to copy the three columns so they collapse as the theme does when the browser is reduced or viewed on a phone. I want to keep working in twenty-twelve and can find plenty of tutorials showing me how to add extra sidebar etc. But what I want to know is how I can produce a full with page no sidebar with 3 columns with images at the top of the each column that act responsively.

    as this example
    [See above link]

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you instead replicate the issue on CSSDesk and share us that?

    Thread Starter Mark Shirley

    (@ravalde)

    Andrew new link below + css and html

    http://www.shiftf8.co.uk/test-site/?page_id=28

    /*-------CSS------*/
    
    .thumbnail-start {
        border: 1px solid #999999;
        float: left;
        margin: 0 16px 15px 17px;
        padding: 13px;
        width: 162px;
    }
    
    .thumbnail
    {
    float: left;
    width: 162px;
    border: 1px solid #999;
    margin: 0 16px 15px 0;
    padding: 13px;
    }
    .thumbnail2
    {
    float: left;
    width: 162px;
    border: 1px solid #999;
    margin: 0 0px 15px 0;
    padding: 13px;
    }
    
    .clearboth { clear: both; }
    
    /*HTML*/
    
    <div class="thumbnail-start">
    <img src="http://localhost:8888/andrew-john-photography/wp-content/uploads/2013/04/front-swatch.jpg" alt=""><br>
    Caption
    
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    </div>
    
    <div class="thumbnail">
    <img src="http://localhost:8888/andrew-john-photography/wp-content/uploads/2013/04/front-swatch.jpg" alt="" ><br>
    Caption
    
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    </div>
    
    <div class="thumbnail">
    <img src="http://localhost:8888/andrew-john-photography/wp-content/uploads/2013/04/front-swatch.jpg" alt="" ><br>
    Caption
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    </div>
    
    <div class="thumbnail2">
    <img src="http://localhost:8888/andrew-john-photography/wp-content/uploads/2013/04/front-swatch.jpg" alt="" ><br>
    Caption
    
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    
    </div>

    Thread Starter Mark Shirley

    (@ravalde)

    Well thanks to esmi im not going to get this one sorted

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    How come?

    Why do you say that? IMHO, Andrew’s a great CSS expert – so this thread is the right place – and creating duplicate threads makes it HARDER for people here to be of help (and it against the forum rules).

    If it’s general CSS – you might want to use a CSS forum such as
    http://csscreator.com

    Thread Starter Mark Shirley

    (@ravalde)

    I was trying to re-write the description of what i needed cus the example is no longer on the link above.

    Thread Starter Mark Shirley

    (@ravalde)

    Ok I now feel like im doing something wrong can I just say resolved and forget it.

    Thread Starter Mark Shirley

    (@ravalde)

    I have resolved this is by following the instructions from here

    http://www.designmite.com/really-easy-responsive-columns-in-wordpress/

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘3 column layout responsive’ is closed to new replies.