Log in

View Full Version : grid isn't set up correctly and image doesn't resize


mlegg
06-24-2015, 04:00 PM
I setup a contact page (http://andrewsamonas.com/contact.html) using a css grid but the page doesn't look like it's a 2 column grid, the image is on top and the text is on the bottom. The full css is here (http://andrewsamonas.com/styles.css)
Also, my image (http://andrewsamonas.com/images/drew.png) doesn't resize down for smaller devices.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>The Artworks - Art & Sign Design Studio</title>
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="msvalidate.01" content="A0C1E8EC728A490DC311D88638123B3E" />
<!-- Start css3menu.com HEAD section -->
<link rel="stylesheet" href="nav_menu_files/css3menu1/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>
<!-- End css3menu.com HEAD section -->
</head>
<body>
<div id="container">
<img id="logo" src="images/artworks-banner.jpg" alt="the artworks logo">
<!-- Start css3menu.com BODY section -->
<ul id="css3menu1" class="topmenu">
<input type="checkbox" id="css3menu-switcher" class="switchbox"><label onclick="" class="switch" for="css3menu-switcher"></label> <li class="topfirst"><a href="index.html" title="Home" style="height:20px;line-height:20px;"><img src="nav_menu_files/css3menu1/bhome.png" alt=""/>Home</a></li>
<li class="topmenu"><a href="gallery.html" title="Photo Gallery" style="height:20px;line-height:20px;">Photo Gallery</a></li>
<li class="toplast"><a href="contact.html" title="Contact" style="height:20px;line-height:20px;">Contact</a></li>
</ul><p class="_css3m"><a href="http://css3menu.com/">css menu</a> by Css3Menu.com</p>
<!-- End css3menu.com BODY section -->
<div id="content">
<h1>Contact</h1>
<div class="section group">
<div class="col span_1_of_2">
<img src="images/drew.png" alt="Drew with sign">
</div>
<div class="col span_1_of_2">
<h3>The Artworks</h3>
<p>Andrew Chasse</p>
<p>21 Blish Road</p>
<p>Marlborough, CT 06447</p>
<p><strong>Phone:</strong> (860) 305-4555</p>
<a href="mailto:aachasse@comcast.net">aachasse@comcast.net</a>
</div>
</div>

<br>
<div style="clear:both;"></div>
</div></div>
<div id="footer">Copyright &copy; The Artworks</div>
<script type="text/javascript">var _cmo = {form: '5584c2ade713be000300275d', text: 'Contact', align: 'left', valign: 'middle', lang: 'en', background_color: '#C0C17F'}; (function() {var cms = document.createElement('script'); cms.type = 'text/javascript'; cms.async = true; cms.src = ('https:' == document.location.protocol ? 'https://d1uwd25yvxu96k.cloudfront.net' : 'http://static.contactme.com') + '/widgets/tab/v1/tab.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(cms, s);})();</script>
</body>
</html>
mlegg
06-24-2015, 04:01 PM
html, body {
width:100%;
min-height:100%;
margin:0 auto;
font-family:'Georgia',Times New Roman;
font-size:100%;
background-color:#007F7D;
color: #000000;
}

#vlb1overlay {z-index:100 !important;}
#container {
width:90%;
margin:auto;
background-color:#fff;
border-bottom-left-radius: 2em;
border-bottom-right-radius: 2em;
}
#logo {
display:block;
width:100%;
}

#content {
clear:both;
position:relative;
padding:1.5em 5%;
}
#Drew {
display:block;
width:90%;
height: auto;
clear: both;
}
a:link {
text-decoration: underline;
}

a:visited {
text-decoration: underline;
}

a:hover {
text-decoration: underline;
}

a:active {
text-decoration: underline;
}

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;
}

#left {
float: left;
width: 32%;
padding:5px;
}

#middle {
float: left;
width: 32%;
padding:5px;
}

#right {
float:left;
width:32%;
padding:5px;
}

.columns {
width:100%;
}
.left{
float:left;
width:480px;
}
.right {
margin-left:360px;
min-width: 250px;
}
.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%;
}
/* 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 (min-width: 275px) {
.span_2_of_2, .span_1_of_2 { width: 100%; }
}


#footer {
background:#007F7D;
width:90%;
margin:auto;
text-align:center;
font-family:sans-serif;
font-size:80%;
color:#fff;
padding:0.5em 0;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
#footer a {
color:#fff;
text-decoration: underline;
}
/* 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 */
}
styxlawyer
06-24-2015, 04:16 PM
For a start you have both sections in the same class. The second one should probably be "span_2_of_2".



<div class="section group">
<div class="col span_1_of_2">
<img src="images/drew.png" alt="Drew with sign">
</div>
<div class="col span_2_of_2">
<h3>The Artworks</h3>
<p>Andrew Chasse</p>
<p>21 Blish Road</p>
<p>Marlborough, CT 06447</p>
<p><strong>Phone:</strong> (860) 305-4555</p>
<a href="mailto:aachasse@comcast.net">aachasse@comcast.net</a>
</div>
</div>
mlegg
06-24-2015, 04:39 PM
I got the code from this site http://www.responsivegridsystem.com/calculator/

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%; }
}
Beverleyh
06-24-2015, 05:26 PM
Can I just point out that this CSS taken from your post immediately above (from the grid system calculator)...
/* 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%; }
}is different to the CSS you posted initially (that you're using in your site)...
/* 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 (min-width: 275px) {
.span_2_of_2, .span_1_of_2 { width: 100%; }
}Pay particular attention to the chunk in red and have a think about what that media query is actually doing.

Media query explanations simplified https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width
mlegg
06-24-2015, 08:03 PM
I forgot to add the id="Drew" to the img tag


<img id="Drew" src="images/drew.png" alt="Drew with sign">

the contact page (http://theartworksllc.com/contact.html) now works correctly, thanks