css column overflow and image problems

[mlegg]

Hi, I am redoing a site for a church festival. I am having a few problems. When you go to the section that says 2014 Festival Hours and there is a touch swipe slider on the right. This looks fine on my laptop full sized. When I scale my screen size down, the left column with Festival Hours the words go outside of the box and my slideshow gets tiny and eventually disappears the smaller you go. On my Samsung Galaxy I don't see the slideshow at all. Then the countdown timer doesn't show on smaller screens or mobile.


CSS:

body {
    width:100%;
    margin:0;
    font-family:'Open Sans',sans-serif;
    font-size:100%;
    background-color:#759FAF;
    }
ul {
    padding:0;
    margin:0;
    list-style-type:none;
 }
#vlb1overlay {z-index:100 !important;}
#container {
    width:90%;
    margin:auto;
    background-color:#fff;    
 }
#logo {
    display:block;
    width:100%;
 }

#content {
    clear:both;
    position:relative;
    padding:1.5em 5%;
 }
.arrow-down {
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	
	border-top: 20px solid #000;
}
#img {
max-width: 100%;
height: auto;
}
h2 {
    clear:both;
    text-align:center;
 }
audio {
    visibility:hidden; 
    height:0; 
    width:0;
 }
#pauseplay {
    float:right; 
    width:32px; 
    height:32px; 
    cursor:pointer;
 }

.innerBox {
  background-color : #ffffff;
  background-repeat : repeat-y;
  padding-top: 1em;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom : 1em;
}

a:link {
    text-decoration: underline;
}

a:visited {
    text-decoration: underline;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

#social {
    margin:auto;
    text-align:center;
}
.columns {
    width:100%;
}
.left{
    float:left;
    width:300px;    
   padding:.5em 2%;
}
.right {
    margin-left:360px;
    padding:.5em 2%;
}
.clear {
    clear:both;
 }

}
/* Flexible iFrame */

.Flexible-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.Flexible-container iframe,   
.Flexible-container object,  
.Flexible-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.google-maps {
    position: relative;
    padding-bottom: 75%; // This is the aspect ratio
    height: 0;
    overflow: hidden;
}
.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}
#map {
    height: 100%;
 }

#footer {
    background:#759FAF;
    width:90%;
    margin:auto;
    text-align:center;
    font-family:sans-serif;
    font-size:80%;
    color:#fff;
    padding:0.5em 0;
 }
#footer a {
    color:#fff;
 }
/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

The HTML is too long to post the code, so here it is in the file
index-text.txt

Countdown timer, it's in the html code above

<h1>The 2015 Festival Dates are Friday July 17, Saturday July 18 and Sunday July 19.</h1>
<b>Countdown to the Portsmouth Greek Festival:</b> 
<script language="JavaScript">
TargetDate = "7/17/2015 5:00 PM";
BackColor = "white";
ForeColor = "navy";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
FinishMessage = "It is finally here!";
</script>
<script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>

[mlegg]

This is the css for the cssslider on the right column. Ooops its too long to post, here is the file
style.css

[molendijk]

Try to give the problematic lines in the 2014-Festival-Hours-section a min-width in pixels. Also, give the images a min-width in pixels.

[mlegg]

I gave the countdown script a min-width: 300px; and that works great.
I gave the styles.css the same thing. It works to a point, once you scroll your page too small the css slider starts hanging out of the white container to the right. Then once you are on a mobile device you don't see the slider at all.

I also added this to the main styles.css

#img {
max-width: 100%;
height: auto;
}

[mlegg]

The issue seems to have something to do with the columns css because I took out the slideshow and added in the same text that is in the left column. Then when you shrink the page the right column of text starts to overflow out of the white container. I didn't upload this to the active site, the original link above.

this is the html for that part (I have the text in the right column for testing purposes, I will place the slideshow back there.

<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">
<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>
<div style="clear:both;"></div>

this is the css for that part

.columns {
    width:100%;
}
.left{
    float:left;
    width:300px;    
   padding:.5em 2%;
}
.right {
    margin-left:360px;
    padding:.5em 2%;
}
.clear {
    clear:both;
 }

[molendijk]

You might want to use a table. This code will give you an idea of how to proceed. CSS is kept inline for readability:

<body style="font-family: verdana; font-size: 13px; ">

<div style="position: relative; left: 3%; width: 94%; ">
The St Nicholas Greek Festival over the past 41 years proves itself over and over again as a a fun event for all ages. This years' Greek Festival year promises to be another great event. The families of the St Nicholas Greek Orthodox Church in Portsmouth, NH get together in June and early July preparing many of the menu items. So come join us for fresh Lamb shanks, hand skewered kabobs, Moussaka, a Gyro or a fresh piece of Baklava. All of the food and pastries at the St Nicholas Greek Festival, taste just like your YiaYia's (Grandmother) recipes.<br><br>

With all of this great homemade food, it's no wonder that the St Nicholas Greek Festival is one of the must attend events every summer on the Seacoast. People travel from all over New England to enjoy the food and the live entertainment. Oh and they may buy some delicious pastries for the ride home!
</div>

<br><br>

<table style="position: relative; left: 6%; width: 88%;  font-size: 15px">

<tr>

<td style="vertical-align: top" >
<div style="max-width: 300px">
2014 Festival Hours<br><br>
Hours: Friday 5pm to 11PM<br><br>
Saturday 11AM to 11PM<br><br>
Sunday 12 noon to 5PM<br><br>
Voluntary admission $3.00 (children under 12 are FREE)<br><br>
Music provided by DJ Meleti all weekend<br><br>
Live Music Friday at 7PM by orfeas<br><br>
Live Music Saturday at 7PM by Dilina<br><br>
Greek Dancing Exhibitions by our Greek School Students Friday and Saturday at 6PM
</div>
</td>

<td style="vertical-align: top">
<img src="http://portsmouthgreekfestival.com/data1/images/1dancing.jpg" alt="" style="width: 100%; min-width: 200px; margin-left: 15px">
</td>

</tr>

</table>

</body>

[Beverleyh]

First remove the widths/min-widths from the slideshow - from dev tools console, that's;

.csslider1 { /* min-width: 300px; */ }

and

.csslider1 > ul > li.img img { /* min-width: 300px; */ }

Then make the widths of the left and right colums relative - no fixed px units. You might want to play with the values below but they work OK as-is;

.left { width: 45%; }
.right { width: 45%; }

Also remove the margin-left: 360px; from the right column and float it right;

.right { float: right; }

Then you'll need to clear the float on the h3 element below (probably easier if you give it a class);

h3.whatever-class { clear: both; }

The above will make the layout completely fluid/responsive but you can use media queries to make the left and right columns 100% wide when the screen gets too narrow.

[mlegg]

Beverly in the main styles css I have all of this. Do I need to add separate code to the columns part in the css? because when the screen is small, the slider just stays on the right real tiny. How can I change the code so that say under 400px that the right column goes under the left column?

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

[Beverleyh]

Use a max-width media query, set to 400px, inside which the left and right column are set to 100% wide. E.g. http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
More info on understanding media queries http://www.emailonacid.com/blog/deta..._and_max-width

[mlegg]

Hi Bev I added max-width: 400px; to the columns css but still get the same effect. Is this code below correct or not what you meant?

.columns {
    width:100%;
}
.left{
    float:left;
    width: 45%;    
   padding:.5em 2%;
  max-width: 400px;
}
.right {
    width: 45%;
    float: right;
    padding:.5em 2%;
   max-width: 400px;
}
.clear {
    clear:both;
 }