Calling the CSS Whisperer - Hey Michelle

I'm having trouble figuring out why my responsive front page is not collapsing properly.
Something has the two columns either way wider than a mobile viewport, or not wide enough.

Can you help me goldilocks the viewport? Just right would be 100%.

We talked about this in the chat, do you still have the url?

  • Stacie
    /*  Mobile Layout: 320px. */
    @media only screen and (max-width: 767px) {
    	body{margin:0;padding:0;width:100%;}
    .hfeed{width:100%;padding:0;}
    
    .header-content,
    .site-header{width:100%;padding:0;height:100px;}
    .kickers{float:left;margin:0px;padding:0px;width:320px;}
    
    div.kickers .kickers-spacer{height:15px;}
    div.kickers{float:left;}
    /*header*/
    
    		#masthead{height:100px;
    			background-size: 195%;
    			background-position: 0px 0px;
    			width:100%;}
    		#page{margin:0;padding:0;width:100% }
    		.more-info{
    			display:none;
    		}
    		#header-option-btn{
    			margin-top:0;
    			float:right;
    			margin-top:0px;
    			width:40px;
    			height:100%;
    			background-color: black;
    			display:block;
    			opacity: 0.4;
          filter: alpha(opacity=40);
    		}
    
    		#header-option-btn i{
    			margin:0 auto;
    			color:#fff;
    			font-size: 35pt;
    			margin-right:15px;
    			margin-top:16px;
    
    		}
    		.site-branding{margin: 0;margin-left:8px;padding:0;height:100px;width:100%;}
    		.site-branding h2.site-description{font-size:9pt;margin-top:1px;margin-left:0px;letter-spacing: normal;}
    		.site-byline{display:none;}
    		.site-title{
    				margin: 0px;
    				display:block;
    				float:left;
    				clear:none;
    				height:100px;
    				width:280px;
    
    }
    h1.site-title{
    	background-image: url('images/Logo.png');
    				background-size: 276px 89px;
    				background-clip: 100% 80px;
    				margin:0;
    				margin:0px -29px 0 -9px;
    				padding:0;
    				background-repeat: no-repeat;
    				height:80px;
    
    }
    			div.menu-top-menu-container {margin-top: -9999;}
    			div.menu-top-menu-container{width:100%;display:block;margin:0;padding:0;}
    
    		.main-navigation{display:none;}
    		#main div.program-header{width:100%;margin:0;padding:0;
    			background-size: 100%;
    			background-position:-400px top;
    			margin-top: 20px }
    			/*home page page */
    			div.billboard.home-program.col-right{margin:-1px; width:100%;float:left}
    
    			div.billboard.home-program{
    				width:100% min-width:none;
    			float:left;}
    			div.billboard.home-program.col-left,
    			div.billboard.home-program.col-right,
    			div.billboard.kicker.col-right{
    				margin:0 auto;
    			 	float:left;
    			 	width:100%;
    			  margin-top:15px;
    			  display:block;
    }
    
      .site-main{width:100%;padding:0;margin:0px;}
    	.content-area{width:100%;padding:0;}
    	div#hero.billboard
    	{
    		width:100%;
    		margin:0;
    		padding:0;
    		display:block;
    		margin-top:20px;
    		background-image: url('images/img-uw-banner-fpo.jpg');
    		background-repeat: no-repeat;
    		background-position: -100px 0px;
    		background-size: 150% 100%;
    		height:200px;
    		}
    div#hero h1{
    	margin-top:10px;
    	margin-left:10px;
    	font-size: 20pt;
    	line-height:25pt;
    	width:40%;
    }
    div#hero .calltoaction{width:50%;
    	text-shadow: 1px 1px #000;
    color:#fff;
    font-size: 14pt;
    text-shadow: 1px 1px #000;}
    
    .menu-header-navigation-container{
    margin-top:-30px;
    float:;
    }
    div#hero p{display:none;}
    
    	#content{
    		margin-top:50px;
    		margin-left:-10px;
    	}
    		.home-program,.col-left, .col-right{width:100%;padding:0;margin:0;}
    
    .widget-area{width:100%;padding:0;}
    
    .menu-footer-menu-container{
    margin:0 auto;
    	width: 100%;
    
    }
    /*program pages */
    		#main div.program-header{margin-left:0px;margin-right:0px;width:100%;}
    		#main div.program-header h1{width:380px;margin-top:20px;margin-left:20px;line-height: 15pt;width:250px;}
    		#program-hero h1{margin-top:20px;margin-left:20px;}
    		#main div.program-header p,
    		#program-hero p{margin-top:5px;margin-left:25px;width:100%;}
    
    #secondary, #tertiary{width:100%; float:left; margin:0; padding:0;}
    .program-detail-topper{display:none;}
    
    /*footer */
    #colophon{width:100%;}
    #colophon div.site-info{width:33%;margin: 0;padding: 0}
    .footer-col{margin:0 auto;margin-top:-20px;}
    .footer-col ul,
    .footer-col h4,
    .recent-facebook-posts{display:none;}
    .social-button{margin:0 auto;margin-bottom:10px;
    font-size: }
     .site-info.final-info-footer,
     .site-info.footer-navigation,
     .social-buttons{width:10%; display:inline;}
     #social-section{
     	margin-top:-20px;
      width:20%;
    }
    
    #colophon,
    .site-footer{
    float:left;
    width:100%;
    margin:0 auto;
    position:relative;
    bottom:-20px;
    }
    
    .footer-col {
    float:left;
    width:100%;
    margin:0 auto;
    }
     .site-info#final-info-footer,
     .site-info.footer-navigation,
      #social-section,
     .social-buttons{
     	width:100%; display:inline;}
    
    #final-info-footer {width:100%}
    .site-footer .social{
    clear: both;
    width: 200px;
    margin: 0 auto;
    margin-top:20px;}
    .site-footer .social ul{
    	margin:0 auto;
    	width: 100%
    }
    #primary.content-area{width:100%}
    .site-footer .social ul li{
    margin-right:5px;
    }
    address,.copyright{margin-left:43px;}
    
    div#final-info-footer div.copyright{display:none;}
    
    #main.site-search, .e4ntry-content, .entry-footer, #comments{
    margin:0;
    padding:0;
    width:100%;
    clear:both;
    }
    h1 {
      font-size: 5.9vw;
    }
    h2 {
      font-size: 3.0vh;
    }
    p {
    	font-size: 20px;
      font-size: 2rem;
    }
    
    div#content.front-site-content, div#primary.content-area, main#main.site-main
    		{width:100;padding:0;margin:0;}
    }
  • Michelle Shull

    Okay! I've got a start.

    First, this will make your kickers kick where they should kick:

    .home-program, .col-left, .col-right {
    width: 48%;
    padding: 2px;
    margin: 5px;
    }

    And this will sort out your general content area:

    .front-site-content {
    width: 100%;
    }
    div.billboard.home-program.col-left, div.billboard.home-program.col-right, div.billboard.kicker.col-right {
    margin: 0 auto;
    float: left;
    width: 50%;

    That gets us to where we are in my screenshot below, but there are still some issues, namely with the branding and the footer. How would you like those to look?

  • Michelle Shull

    Hey there, Stacie!

    That actually is mobile view, (the new Chrome dev tools, for the beta release of new chrome, lets you examine a site in mobile view. It's incredible.) so that red banner is only actually about 120 pixels wide. The columns are actual size here. You want them all in a single column? The full width of the mobile screen?

    That I can do! Confirm that's what you're looking for, and I'll dig in. : )

  • Michelle Shull

    Hi, Stacie!

    Sorry for the delay, we're working at about half the normal staff right now, so it's sort of like trying to juggle oiled up bowling pins while riding a unicycle in a tornado right now.

    The root of all your evil is this div:

    div.billboard.home-program

    which has a min width of 420px, so it's what's forcing your billboard images to bork up on mobile.

    However, changing that to 100% causes a series of unfortunate events we now need to untangle, namely, the floating text which no longer floats in an attractive way. (See first screenshot of the dev tools mobile mock-up.)

    So I've got a series of fixes. Woohoo!

    First up, your drop down:

    .wrapper-dropdown-1{
    width: 60%;
    }

    Next, the way-large padding on between the masthead and the content:

    @media (max-width: 760px)
    #body #content {
    padding-top: 15px;
    }

    Next, the "Message from the Chancellor" call to action:

    div#hero.billboard h4.calltoaction, div#hero.billboard h4.calltoaction a {
    margin-left: 10px;
    }

    That's still not perfect, but I wondered if you had any insight on that particular div.

    There's also still an issue with the drop down not aligning properly, but I'm struggling with that one a bit, too.

    Try the fixes here and see if that's getting you closer on your end, and we'll keep digging!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.