grid isn't set up correctly and image doesn't resize

**mlegg** · 06-24-2015, 04:00 PM

I setup a contact page 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
Also, my image doesn't resize down for smaller devices.

Code:

<!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

Code:

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".

Code:

<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

Code:

<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

Code:

/*  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)...

Code:

/*  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)...

Code:

/*  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/art..._and_max-width

**mlegg** · 06-24-2015, 08:03 PM

I forgot to add the id="Drew" to the img tag

Code:

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

the contact page now works correctly, thanks

Thread: grid isn't set up correctly and image doesn't resize

Thread Tools

Search Thread

grid isn't set up correctly and image doesn't resize

Similar Threads

iFrame SSI script II doesn't resize with tab panels

Ultimate Fade-in slideshow: Resize current image on window resize - NEED HELP PLEASE

Webpage doesn't display correctly in non-FF browsers

Conveyor Belt Slideshow Doesn't Display Correctly

menu doesn't appear correctly in Mac/IE

Bookmarks

Bookmarks

Posting Permissions