css column overflow and image problems

[mlegg]

html for the columns (was too many characters for one post

<div class="columns">
    <div class="left">
<p><b>2014 Festival Hours</b></p>
<p>Hours: Friday 5pm to 11PM</p>
<p>Saturday 11AM to 11PM</p>
<p>Sunday 12 noon to 5PM</p>
<p>Voluntary admission $3.00 (children under 12 are FREE)</p>
<p>Music provided by DJ Meleti all weekend</p>
<p>Live Music Friday at 7PM by orfeas</p>
<p>Live Music Saturday at 7PM by Dilina</p>
<p>Greek Dancing Exhibitions by our Greek School Students Friday and Saturday at 6PM</p>
</div>
    <div class="right">
<!-- Start cssSlider.com -->
	THIS CODE IS TOO MANY CHARACTERS
		<!-- End cssSlider.com -->
</div></div>
<div style="clear:both;"></div>

[Beverleyh]

No that isn't what I meant. I meant a max-width media query, like the one here http://www.w3schools.com/cssref/css3_pr_mediaquery.asp - with the left and right columns defined inside and both given 100% width

[mlegg]

I fixed it by changing from responsive columns to a responsive grid like this

Choose a margin (%)
What Margin is Best?

A margin of 1.6% gives you about 20 pixels on a standard monitor, but feel free to go large to suit your content.

" Don't make the margin more than 10% or you'll end up with more margin than content! "
Your Calculated Grid Size
Here's your row of 2 with your margin of 1.6%.
1 of 2
1 of 2
The Code
Copy and paste the HTML and the CSS and you're away!
The HTML

<div class="section group">
	<div class="col span_1_of_2">
	This is column 1
	</div>
	<div class="col span_1_of_2">
	This is column 2
	</div>
</div>

The CSS

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF TWO  */
.span_2_of_2 {
	width: 100%;
}
.span_1_of_2 {
	width: 49.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
}

@media only screen and (max-width: 480px) {
	.span_2_of_2, .span_1_of_2 { width: 100%; }
}

html code

<div class="section group">
	<div class="col span_1_of_2">
	<p><b>2014 Festival Hours</b></p>
<p>Hours: Friday 5pm to 11PM</p>
<p>Saturday 11AM to 11PM</p>
<p>Sunday 12 noon to 5PM</p>
<p>Voluntary admission $3.00 (children under 12 are FREE)</p>
<p>Music provided by DJ Meleti all weekend</p>
<p>Live Music Friday at 7PM by orfeas</p>
<p>Live Music Saturday at 7PM by Dilina</p>
<p>Greek Dancing Exhibitions by our Greek School Students Friday and Saturday at 6PM</p>
	</div>
	<div class="col span_1_of_2">
	<!-- Start cssSlider.com -->
	SLIDE CODE WAY TOO LONG TO POST
		<!-- End cssSlider.com -->
	</div>
</div>
<div style="clear:both;"></div>

[Beverleyh]

I fixed it by changing from responsive columns to a responsive grid like this

but you're already using a grid system.

Auto-generators like http://www.responsivegridsystem.com/ are great but it's easy to get a lot of extra code-bloat that you don't need, especially when mixing a full, existing grid system and a partial regeneration from another source. I'm a bit confused why you don't keep using the responsive grid that is already in your stylesheet - are you aware that there are 2 different grid systems now in your CSS? Be careful when mixing them and try to clean up the one(s) that you aren't using to avoid future conflicts.