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 Coder
    Join Date
    Sep 2013
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Positioning text and pictures, left/right

    Hey guys, so I want to get my webpage to show the text on the left, and then the photos on the right side, however I am at a road block. I got it to work fine on the desktop, however I want it to work on the
    Code:
    /*Tablet Portrait Mode*/
    
    @media (min-width : 768px) 
    and (max-width : 1024px) 
    and (orientation : portrait) {
    and I just cant seem to get it. Here is the CSS for it, the mobile is the bottom part. top is for desktop.

    Thanks

    Code:
    body {background-image:url('../images/space1.jpg');
        background-position: center;
        background-size: cover;
    	
    }
    
    body 
    {color:white;
    
    }
    a, a:visited { 
        color:#3399FF ; text-decoration:none; 
        }
    	
    @media (min-width:1200px) {	
    div.header{
    text-align:right;
    font-size:200%;
    }
    
    div.header1 {
    text-align:right;
    font-size:125%;
    }
    
    div.logo
    img {
    width:350px;
    min-width:200px;
    max-width: 350px;
    margin-top:-3%;
    }
    
    div#right {
    img
    text-align:center;
    width:25em;
    float:right;
    padding:5px;
    }
    div#left {
    float:left;
    width:60%;
    }
    
    span#about {
    font-size: 200%;
    margin-left:3%;
    }
    p#About {
    font-size:175%;
    width:60%;
    margin-left:6%;
    }
    p#pastconversions {
    font-size:175%;
    text-decoration:underline;
    }
    
    #nav{
    width:75%;
    height:3%;
    font-size: 150%;
    font-weight: bold;
    border-radius: 8%;
    text-align: center;
    margin: 0 auto;
    margin-top:-3%;
    }
    
    
    #nav ul {
    height: auto;
    padding: 0% 0%;
    margin: auto%;
    background-color: #f2f2f2;
    border-bottom: 5% solid #ccc; 
    display: inline-block;
    overflow:hidden;
    	}
    
    #nav li { 
    display: inline-block;
    padding: 3%; 
    margin-left: auto;
    margin-right: auto;
    }
    
    #nav a {
    text-decoration: none;
    padding: 0% 0% 0% 0%;
    }
    
    #nav a:hover {
    color: #000000;
    background-color: white;} 
    
    
    nav ul ul {
    	display: none;
    }
    
    nav ul li:hover > ul {
    		display: block;
    }
    }
    
    /*Tablet Portrait Mode*/
    
    @media (min-width : 768px) 
    and (max-width : 1024px) 
    and (orientation : portrait) {
    div.header {
    font-size:130%;
    text-align:right;
    }
    div.header1 {
    font-size:120%;
    text-align:right;
    }
    
    img {
    width:35%;
    margin-top:-5%;
    }
    #nav{
    width:100%;
    height:3%;
    font-size: 110%;
    font-weight: bold;
    border-radius: 8%;
    text-align: center;
    margin: 0 auto;
    
    }
    
    
    #nav ul {
    height: auto;
    padding: 0% 0%;
    margin: auto%;
    background-color: #f2f2f2;
    border-bottom: 5% solid #ccc; 
    display: inline-block;
    overflow:hidden;
    	}
    
    #nav li { 
    display: inline-block;
    padding: 3%; 
    margin-left: auto;
    margin-right: auto;
    }
    
    #nav a {
    text-decoration: none;
    padding: 0% 0% 0% 0%;
    }
    
    #nav a:hover {
    color: #000000;
    background-color: white;} 
    
    
    nav ul ul {
    	display: none;
    }
    
    nav ul li:hover > ul {
    		display: block;
    }
    div#right {
    
    img
    text-align:center;
    height:100px;
    width:600px;
    float:right;
    }
    div#left {
    float:left;
    width:60%;
    }
    
    span#about {
    font-size: 130%;
    margin-left:none;
    }
    p#About {
    font-size:110%;
    width:60%;
    margin-left:none;
    }
    
    }

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,104
    Thanks
    23
    Thanked 594 Times in 593 Posts
    Your site will disappear when the width goes under 1200px and will not re-appear until the width is 1024px. It again disappears at 768px forever.

    You have set your text color to white. I had to add background-color to see anything.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

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