www.webdeveloper.com
Results 1 to 3 of 3

Thread: Max-Height and Max-Width

  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
    15

    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,105
    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.
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

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