1 reply [Last post]
Eric Olthwaite
Eric Olthwaite's picture
Offline
newbie
Last seen: 7 years 34 weeks ago
Timezone: GMT+1
Joined: 2015-03-30
Posts: 1
Points: 2

New to all this so please excuse my ignorance!
I am trying to convert an existing table based website to be mobile responsive, but have been advised it is probably easier to start from scratch.

I have started by creating a basic 2 column page on here with header and footer)
All I want to do is remove the left hand column completely at a certain resize point as it is not essential on mobiles.
I Added the following code to the css file:

@media only screen and (max-width : 600px) {
	td:first-child {
display: none;
}

(This works on old table based site, but did not work here.)

Tried adding the script to the html and that didnt work either. Any suggestions?

HTML Here

<!doctype html>
<html>
<head>
<title>CssCreator-->HTML5 Template</title>
<meta charset="utf-8"/>
<meta generator="csscreator.com"/>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
 
<link rel="stylesheet" href="1448470.css" type="text/css"/>
</head>
<body>
<div id="pagewidth">
<div id="header"><h2>Head</h2> <p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p></div>
<div id="wrapper" class="clearfix">
<div id="maincol"><h1>Main Content Column</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p> </div>
<div id="leftcol"> <h2>Left Column</h2><p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p></div>
</div>
<div id="footer"><h2>Footer</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></div>
</div>
</body>
</html>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi Eric, Just replace

Hi Eric,
Just replace td:first-child with #leftcol