Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Responsive Boostrap Alignment with CSS Help

    Hi all, I'm doing a project for a client and I cant seem to get my HTML or CSS to align anything in the way I have it in this mockup (I added below). I tried the float commands, along with fluid and position to no avail. The moment I link bootstrap-min-responsive.css it pushes all my content into the left hand side cutting most off. The only thing that seems to be working is when the browser is scaled down, my content centers itself. It validates and all, I just cant seem to implement the right command to get everything into the arrangement I need as my mockup. Before I had a carousel and all the images in the way I needed it but everything got confusing when boostrap was implemented and pushed all my content to the left.

    I have attached my mockup to show the aesthetic that I'm trying to get. Along with the barebones styles.css and html. Any help is very appreciated!

    P.S. - I'm using textwrangler as my main coding app, and by the mockup, I dont have the carousel implemented yet and at the bottom, the contact, sponsors, and donate should be at the bottom in a 3 column arrangement.

    Mockup:


    HTML:
    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
      <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
       <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300' rel=   'stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/styles.css" type="text/css" media="screen"/>
    <style type="text/css">
    body {
    	background-image: url(images/notebook.png);
    	background-repeat: repeat;
    }
    </style>
    <title> Purpose Project </title>
    
    </head>
    
    
    <body>
    
    <div id="main">
    
    <header> <a href="index.html"><img src="images/final-logo.png" alt="Logo" width="342" height="133" /></a>
     
    <div id="bar">
        <div id="nav">
            <ul class="nav">
                <li><a class="visible-desktop visible-tablet" HREF="about.html">OUR PURPOSE</a></li>
                <li><a class="visible-desktop visible-tablet" HREF="projects.html">PROJECTS</a></li>
                <li><a class="visible-desktop visible-tablet" HREF="getinvolved.html">GET INVOLVED</a></li>
                <li><a class="visible-desktop visible-tablet" HREF="contact.html">CONTACT</a></li>
            </ul>
          <img src="../../../Screen shot 2013-09-27 at 9.49.12 AM.png" alt="shirt" /></div>
        </div>
    </header>
    
    <article> 
        <h4>"The good leaves will cover the torn leaves and the torn leaves will cover the shredded leaves."</h4>
        <h1>OUR MISSION</h1>
        <p>Lorem Ipsum</p>
    
    </article>
    
    <aside></aside>
    
    <footer id="footer">
    
    		<div id="footer-content">
    			<div class="row">
    				<div id="footer-inner" class="clearfix">
    
    	<div class="col-footer one">
    		<div class="col-inner">
    			<h3>contact</h3>
    			<p>
    				The Purpose Project<br>
    				340 Haven Ave.<br>
    				Suite #4S<br>
    				New York, NY 10033
    			</p>
    			<p>ph: 917-969-5248</p>
    			<p><a href="mailto:info@thepurposeprojectfilm.com">info@thepurposeprojectfilm.com</a></p>
    		</div>
    	</div>
    
    	<div class="col-footer two">
    		<div class="col-inner">
    			<h3>sponsors</h3>
    			<div class="kinetiscope">
    				<a href="http://www.kinetiscope.com/" target="_blank">
    					<img src="http://www.the-purpose-project.org/wp-content/themes/purpose/images/kinetiscope.png" alt="Kinetiscope">
    				</a>
    			</div>
    			<div class="clearfix">
    				<div class="homedepot">
    					<a href="http://www.homedepot.com/" target="_blank">
    						<img src="http://www.the-purpose-project.org/wp-content/themes/purpose/images/homedepot.png" alt="Homedepot">
    					</a>
    				</div>
    				<div class="samara">
    					<a href="http://www.samarafundraisingsolutions.com/" target="_blank">
    						<img src="http://www.the-purpose-project.org/wp-content/themes/purpose/images/samara.png" alt="Samara">
    					</a>
    				</div>
    			</div>
    			<div class="bluemarker">
    				<a href="http://bluemarker.com/" target="_blank">
    					<img src="http://www.the-purpose-project.org/wp-content/themes/purpose/images/bluemarker.png" alt="Bluemarker">
    				</a>
    			</div>
    		</div>
    	</div>
    
    	<div class="col-footer three">
    		<div class="col-inner">
    			<h3>links</h3>
    			<p><a href="https://www.fracturedatlas.org/site/fiscal/profile?id=3205" target="_blank">www.fracturedatlas.org</a></p>
    			<p><a href="http://helpinghow.com/" target="_blank">www.helpinghow.com</a></p>
    			<p><a href="http://badrightbreast.com/" target="_blank">www.BadRightBreast.com</a></p>
    		</div>
    	</div>
    
    	<div class="col-footer four">
    		<div class="col-inner">
    			<h3>follow us</h3>
    			<ul class="social">
    				<li class="vimeo"><a href="http://vimeo.com/channels/476550" target="_blank"></a></li>
    				<li class="facebook"><a href="https://www.facebook.com/pages/The-Purpose-Project-Thaos-Library/106541759400035" target="_blank"></a></li>
    				<li class="twitter"><a href="https://twitter.com/purpose_project" target="_blank"></a></li>
    			</ul>
    		</div>
    	</div>
    
    </div><!-- #footer-inner -->			</div>
    		</div>
    
    		<div id="copyright">
    			<div class="row">
    				&copy; Copyright 2013  The Purpose Project. All rights reserved.			</div>
    		</div>
    
    </footer>
    
    </div>
    
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-dropdown.js"></script>
    </body>
    </html>
    Styles.css:
    #main { /*applys to all content in the body-- including the background*/
    font-family: 'Open Sans', sans-serif;
    font-size:12px;
    font-weight: 400;
    background-image:url('images/notebook.png');
    background-repeat:repeat-x;
    background-size: cover;
    margin-right: auto;
    margin-left: auto;
    }

    h1, h2 {
    font-weight: 700;
    font-size: 30px;
    }

  • #2
    New Coder
    Join Date
    Aug 2013
    Posts
    50
    Thanks
    1
    Thanked 3 Times in 3 Posts
    It is a bit hard to work with minimal code provided, especially your css.

    The only part that is cut from the viewport is your footer, check your css(commenting out lines) if there is a problem.
    You also have twice the same background image in your body style and # main
    Code:
    <style type="text/css">
    body {
    	background-image: url(images/notebook.png);
    	background-repeat: repeat;
    }
    </style>
    and
    Code:
    #main { /*applys to all content in the body-- including the background*/
    font-family: 'Open Sans', sans-serif;
    font-size:12px;
    font-weight: 400;
    background-image:url('images/notebook.png');
    background-repeat:repeat-x;
    background-size: cover;
    margin-right: auto;
    margin-left: auto;
    }
    Last edited by Dznr; 10-16-2013 at 12:59 PM.


  •  

    Tags for this Thread

    Posting Permissions

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