Results 1 to 6 of 6

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

  1. #1
    Join Date
    Jan 2009
    Location
    NH
    Posts
    631
    Thanks
    96
    Thanked 24 Times in 24 Posts

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

    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>

  2. #2
    Join Date
    Jan 2009
    Location
    NH
    Posts
    631
    Thanks
    96
    Thanked 24 Times in 24 Posts

    Default

    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 */
    }

  3. #3
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    432
    Thanks
    0
    Thanked 54 Times in 50 Posts

    Default

    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>

  4. #4
    Join Date
    Jan 2009
    Location
    NH
    Posts
    631
    Thanks
    96
    Thanked 24 Times in 24 Posts

    Default

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

  5. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,035
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  6. #6
    Join Date
    Jan 2009
    Location
    NH
    Posts
    631
    Thanks
    96
    Thanked 24 Times in 24 Posts

    Default

    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

Similar Threads

  1. iFrame SSI script II doesn't resize with tab panels
    By Marnix26 in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 10-31-2013, 02:07 PM
  2. Replies: 3
    Last Post: 02-21-2012, 12:03 PM
  3. Replies: 2
    Last Post: 04-22-2010, 11:36 AM
  4. Conveyor Belt Slideshow Doesn't Display Correctly
    By gwaples in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 02-08-2006, 07:47 AM
  5. menu doesn't appear correctly in Mac/IE
    By 10138513 in forum CSS
    Replies: 0
    Last Post: 06-09-2005, 01:20 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •