WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] 3 column layout responsive (12 posts)

  1. Mark Shirley
    Member
    Posted 1 year ago #

    Hi Ive been trying to produce a three column layout similar to the theme below. Im able to make the images work responsively, on a mobile its fine but they stick out of the page on a I pad. If anyone could point me to a tutorial to do this it would be much appreciated.

    http://www.elegantthemes.com/demo/?theme=Chameleon

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Can you provide a link to the issue?

  3. Mark Shirley
    Member
    Posted 1 year ago #

    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]

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  5. Mark Shirley
    Member
    Posted 1 year ago #

    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>
  6. Mark Shirley
    Member
    Posted 1 year ago #

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

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    How come?

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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

  9. esmi
    Forum Moderator
    Posted 1 year ago #

  10. Mark Shirley
    Member
    Posted 1 year ago #

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

  11. Mark Shirley
    Member
    Posted 1 year ago #

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

  12. Mark Shirley
    Member
    Posted 1 year ago #

    I have resolved this is by following the instructions from here

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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.