3 column layout responsive

Can you provide a link to the issue?

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]

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

Andrew new link below + css and html

https://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="https://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="https://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="https://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="https://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>

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

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
https://csscreator.com

https://codex.www.ads-software.com/Forum_Welcome#Being_.27Mod_Watched.27_or_Banned

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

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

I have resolved this is by following the instructions from here

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