css column overflow and image problems

[mlegg]

Hi, I am redoing a site for a church festival (http://portsmouthgreekfestival.com/). 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.

5660 5661
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
5662

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
5663

[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?

5667


/* 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/details/C13/emailology_media_queries_demystified_min-width_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;
}

[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 :confused: 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.