www.webdeveloper.com
Results 1 to 3 of 3

Thread: Max-Height and Max-Width

Hybrid View

  1. #1
    Join Date
    Aug 2012
    Posts
    4

    Max-Height and Max-Width

    Hi,

    I am doing a project which can be located here:
    http://www.collegeandco.com/newsite

    I am trying to make a fluid page so it kinda looks good on all devices.

    In particular, I have made the main buttons and set a max-width of 23%. However, on wide screens, the buttons are huge so I wish to set a max-height as well.

    However, everything I do doesnt work. Any help would be appreciated.

    Here is the CSS:
    Code:
    html {
    	height: 100%;
    	width: 100%;
    	margin: 0;
    }
    
    body {
    	line-height: 1.3em;
    	-webkit-font-smoothing: antialiased;
    	margin: 0;
    	padding: 0;
    	height: 100%;
    }
    
    p {
    	font-size: 0.95em;
    	line-height: 1em;
    	margin: 1em 0 0;
    	font-family:Arial, Helvetica, sans-serif;
    }
    			
    a {
    	text-decoration: none;
    }
    
    img {
    	border: 0;
    	max-width: 100%;
    	max-height: 100%;
    }
    
    .pace .pace-progress {
      background: #fff900;
      position: fixed;
      z-index: 2000;
      top: 0;
      left: 0;
      height: 2px;
    
      -webkit-transition: width 1s;
      -moz-transition: width 1s;
      -o-transition: width 1s;
      transition: width 1s;
    }
    
    .pace-inactive {
      display: none;
    }
    
    #header {
    	width: 100%;
    	height: auto;
    }
    
    #logocontainer {
    	width: 85%;
    	margin: 0 auto;
    	clear:both;
    }
    
    #menucontainer{
    	width: 100%;
    	clear:both;
    	background-color:#F00;
    	margin-bottom:50px;
    }
    
    .vcontainer {
    	max-width: 23%;	
    	display: inline-block;
    	background: #FFF;
    	background: rgba(255, 255, 255, 0.8);
    	border-radius: 8%;
    	-moz-border-radius: 8%;
    	position:relative;
    	margin-left: 0.5%;
    	margin-right: 0.5%;
    }
    
    p.vehicle-title {
    	font-weight:bold;	
    }
    	
    img.a {
    	position: relative;
    	left: 0;
    	top: 0;
    	z-index: 10;
            }
    	
    img.b {
    	position: absolute;
    	left: 0;
    	top: 0;
    	}

  2. #2
    Join Date
    Nov 2013
    Posts
    18

    Pixels

    Have you tried working with pixels instead of % and add
    html { -webkit-text-size-adjust: none; }
    to the css to make it look decent in mobile devices as well?
    Easy solution to the problem but for a basic page like that I think it will work fine.

  3. #3
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    You'll want to do something like:

    {width: 23%; max-width: 300px;}

    That way it'll be 23% unless you're on a large screen, which it'll go to 300px.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles