WordPress.org

Ready to get started?Download WordPress

Forums

Help with my footer css (5 posts)

  1. mchlshkr
    Member
    Posted 1 year ago #

    So before I start, I admit I am a WordPress novice and have limited knowledge of html and php. Most of the work I do is within the css file. I am learning though. I am trying to organize my footer into three columns, and currently they are vertically stacked and I'm pretty sure a few widgets might not even be showing. Here is the code. I really would appreciate any suggestions as to which parts of this css to modify. Thanks.

    footer {
    	color: black;
    	text-shadow: 0 0 1px #000;
    	padding:20px 0;
    	border-top: 5px solid #313131;
    	-webkit-box-shadow: 0 -5px 0 rgba(0, 0, 0, .1);
    	box-shadow: 0 -5px 0 rgba(0, 0, 0, .1);
    	margin-top:20px;
    	height: 100%;
    	position:relative;
    	clear:both;
    }
    	footer a{ display:inline; color:#fff;}
    	footer a:hover{}
    
    /* Footer Widgets */
    #footer-widget-area{width:100%; display: block;}, .footer-bottom .container{
    	margin: 0 auto;color:#fff;
    }
    	.footer-widgets-box{margin-right:4%;}
    
    	.footer-1c .footer-widgets-box{	width:30%;}
    	.footer-2c .footer-widgets-box{	width:30%;}
    	.footer-3c .footer-widgets-box{	width:30%;}
    	.footer-4c .footer-widgets-box{	width:30%;}
    
    	.narrow-wide-2c #footer-first , .wide-narrow-2c #footer-second {width:32%;}
    	.narrow-wide-2c #footer-second, .wide-narrow-2c #footer-first {width:64%;}
    
    	.wide-left-3c #footer-first    ,.wide-right-3c #footer-third  {	width:46%;}
    	.wide-left-3c .footer-widgets-box , .wide-right-3c .footer-widgets-box {	width:23%;}
    
    	.footer-1c .footer-widgets-box,
    	.narrow-wide-2c #footer-second,
    	.wide-narrow-2c #footer-second,
    	.footer-2c #footer-second,
    	.footer-3c #footer-third,
    	.footer-4c #footer-fourth,
    	.wide-right-3c #footer-third,
    	.wide-left-3c #footer-third{margin-right:0;}
    
    	.footer-widget-top{
    		border-bottom:0px solid #2C2C2C ;
    		padding:10px 0;
    	}
    	.footer-widget-top h4{
    		font-size: 22px;
    		font-family: BebasNeueRegular,arial,Georgia, serif;
    	}
    	.footer-widget-container{
    		padding: 5px;
    		border-top:0px solid #525151; display:inline;
    	}
    		.footer-widget-container p {padding-bottom: 1.0em;}
    		.footer-widget-container ul, footer .tabs-wrap ul{ border-bottom:1px solid #525151; }
    		.footer-widget-container li, footer #tabbed-widget .tabs-wrap li {
    			padding: 6px 12px 6px 0;
    			line-height: 18px;
    			overflow: hidden;
    			border-bottom: 1px solid #2C2C2C !important;
    			border-top: 1px solid #525151;
    		}
    		.footer-widget-container li:first-child , footer #tabbed-widget .tabs-wrap li:first-child { border-top:0 none;}
  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    There's really no way to help with issues like this without seeing the actual page live. Can you post a link to it?

  3. mchlshkr
    Member
    Posted 1 year ago #

    Oops meant to include..

    http://www.nationlearn.com

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You need to use "float: left;" on each of the widgets -- that's what puts them side by side. Start by changing to this code:

    .footer-4c .footer-widgets-box {
        float: left;
        width: 25%;
    }

    Your widths add up to move than 100% too -- you have to include the margins in the total width...

  5. mchlshkr
    Member
    Posted 1 year ago #

    cool. Just changed it, thank you so much. I think I've got it from here, wow I knew I had to float something left. You are a saint.

Topic Closed

This topic has been closed to new replies.

About this Topic