3 Attachment(s)
css column overflow and image problems
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.
Attachment 5660 Attachment 5661
CSS:
Code:
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
Attachment 5662
Countdown timer, it's in the html code above
Code:
<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>
