• zobiaalvi

    (@zobiaalvi)


    Hi there!

    I’m using Atmosphere Pro theme on the Genesis Framework and for some reason after I added a sidebar in the blog section of my website, I think some settings on the front page css were changed and I no longer see my site stretching the full-width of the screen.

    Here is the code for the first element on the site which is everything over the big blue background: (http://littleeternities.com/testsite): How do I make it stretch full-width again?

    /* Front Page 1
    --------------------------------------------- */
    
    .front-page-1 {
    	display: table;
    	overflow: hidden;
    	padding: 80px;
    	table-layout: fixed;
    	text-align: center;
    	width: 100%;
    	height: 450px;
    }
    
    .front-page-1 a {
    	color: #fff;
    }
    
    .content .front-page-1 a:hover,
    .content .front-page-1 a:focus {
    	color: #ddd;
    	border-bottom: 1px dotted #ddd;
    }
    
    .front-page-1 .widget {
    	margin-bottom: 40px;
    }
    
    .front-page-1 .widget:last-child {
    	margin-bottom: 0;
    }
    
    .front-page-1 .widget-area {
    	display: table-cell;
    	vertical-align: middle;
    	width: 100%;
    }
    
    .front-page-1,
    .front-page-1 p,
    .front-page-1 .widget-title {
    	color: #fff;
    }
    
    .front-page-1 .widget-title {
    	font-size: 60px;
    	font-size: 6rem;
    	font-weight: 300;
    	letter-spacing: 0;
    	margin-bottom: 10px;
    	text-transform: none;
    }
    
    .front-page-1 p {
    	font-size: 24px;
    	font-size: 2.4rem;
    }
    
    .front-page-1 p:last-child {
    	margin-bottom: 0;
    }
    
    .content .front-page-1 .widget a.button,
    .front-page-1 button,
    .front-page-1 input[type="button"],
    .front-page-1 input[type="reset"],
    .front-page-1 input[type="submit"],
    .front-page-1 .entry-content a.button,
    .front-page-1 .entry-content a.more-link {
    	border: 1px solid #fff;
    	color: #fff;
    	margin-top: 40px;
    }
    
    .content .front-page-1 .widget a.button:hover,
    .content .front-page-1 .widget a.button:focus,
    .front-page-1 button:hover,
    .front-page-1 button:focus,
    .front-page-1 input:hover[type="button"],
    .front-page-1 input:focus[type="button"],
    .front-page-1 input:hover[type="reset"],
    .front-page-1 input:focus[type="reset"],
    .front-page-1 input:hover[type="submit"],
    .front-page-1 input:focus[type="submit"],
    .front-page-1 .entry-content a.button:hover,
    .front-page-1 .entry-content a.button:focus,
    .front-page-1 .entry-content a.more-link:hover,
    .front-page-1 .entry-content a.more-link:focus {
    	border: 1px solid #fff;
    	background-color: #fff;
    	color: #333;
    }
Viewing 1 replies (of 1 total)
  • Thread Starter zobiaalvi

    (@zobiaalvi)

    Fixed it! Issue was with the max-width in the overall stylesheet that was changed!

Viewing 1 replies (of 1 total)
  • The topic ‘Elements on front page won't stretch 100% width of the screen’ is closed to new replies.