Home page elements “squish” when browser window is small.

[RyanPayne]

Site: kangaroobranding.com

Hello all,

The elements on my home page squish together whenever I resize my browser window to be small, I’m new to CSS so I have no idea where to begin to fix this problem.

I am running a Genesis child theme on WordPress and can provide any code you may need.

Thank you very much!
Ryan

[dclardy64]

I am pretty sure that we call the responsive design. Most people would love that. It looks like your slider doesn’t seem to be that responsive though.

[RyanPayne]

So you don’t think it looks bad? haha, I was going for something like this.

[dclardy64]

There are some things that need some work, but I think that it looks pretty good.

[RyanPayne]

Ok cool, thanks! Just out of curiosity, what do you think needs work? I just started doing this and I’d love any criticism.

[RyanPayne]

Sweet, thanks for the tips.

I ended up taking out the responsive design code in my style.css folder which did what I was wanting on the home page, except for the footer widgets. They seem to “spread” apart as the window gets larger – not a big deal at all but I’d feel better if I knew how to fix it.

Here’s the code in my style.css I’m working with:

/* Footer Widgets

*/



#footer-widgets {

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-moz-box-shadow: 0 1px 2px #999;

-webkit-box-shadow: 0 1px 2px #999;

background-color: #bfcdd7;

border-radius: 0px;

box-shadow: 0 1px 2px #999;

clear: both;

font-size: 14px;

color: #000000;

margin: 20px auto 0;

width: 100%

}



#footer-widgets .wrap {

overflow: hidden;

padding: 25px 30px 10px;

}



#footer-widgets .widget {

background: none;

border: none;

margin: 0 0 15px;

padding: 0;

}



#footer-widgets p {

font-size: inherit;

margin: 0 0 10px;

}



#footer-widgets ul {

margin: 0;

}



#footer-widgets ul li {

border-bottom: 1px dotted #ccc;

list-style-type: none;

margin: 0 0 5px;

padding: 0 0 5px;

word-wrap: break-word;

}



#footer-widgets #wp-calendar thead,

#footer-widgets #wp-calendar td {

background: none;

}



#footer-widgets .widget {

margin: 0 0 15px;

}



.footer-widgets-1 {

float: left;

position: relative;

left: 15%;

margin: 0 100px 0 0;

width: 300px;

}



.footer-widgets-2 {

float: right;

position: relative;

left: -15%;

margin: 0 0 0 150px;

width: 300px;

}



.footer-widgets-3 {

float: right;

width: 280px;

}

It’s important to note that when I change the width from 100% to 960px the color of the footer widget no longer goes across the entire page. Website is kangaroobranding.com.

Thanks a lot!
Ryan

[dfogge]

to ensure the footer contents dont spread apart try wrapping everything in a container div.

so your footer would go like this:

...


...


 !-- end footer-container -->

then add this to your css:

.footer-container{

margin: 0 auto;

width: 960px;

}

to fix the issue of the footer color not extending you might want to try changing the footer and footer widget divs’ widths to match the wrapper div (from 100% to 960px).

then at the bottom of your css add in a media query that tells those divs to revert their widths back to 100% when the width of the browser is beyond 960px.

@media only screen and (min-width : 961px) {

#footer-widgets {width: 100%;}

#footer {width: 100%;}

}

hope that helps!

[RyanPayne]

Thanks! It does help, I’m just having trouble figuring out where to add the container div at, haha. I’m running a child theme on Genesis for WordPress – would add the container div in my footer.php under the Genesis?

I’m still figuring things out, lol.

Thanks,
Ryan

[dfogge]

oof yeah that could be a pain…

if you use sublime text 2 open all the php files that it could possibly be in the go to Find in Files. other text editors have similar features but none come to mind at the moment.

using Find in Files, search for the footer elements by their selector id or class until it all makes sense ;)

good luck!

[theacefes]

I would also consider using a sprite especially for those social icons toward the bottom – it will look better aesthetically when the user hovers over the image.

[Author]

Posts