Problem with homepage scaling...

[satori83]

I have been customizing a Wordpress theme for a client and I can't seem to get the top of the homepage to scale correctly on my laptop or mobile. The rest of it is fine, seeing as it was coded by a pro I have a few elements going on in there, a slideshow, a logo, a background image, and a custom form built with gravity forms. I know if I play around with the background image I could probably get that to scale down using percentages. But since I have defined px sizes for the form and sliders, I am not sure how to make it all uniformly scale. Is this some basic css rules that I am missing or do I need to learn some responsive design techniques? Here is all the code so far...
HTML and Shortcodes

<div id="hlogo"><img src="http://www.amerikick.com/wp-content/uploads/2012/04/AmeriKick_Red_Home.png" style="width:514px; height:226px;" /></div>
<div id="slideform">
<div id="form">[gravityform id="2" name="Web Only Offer" title="false"]</div>
<div id="slider">[slider]
[slide url=http://www.amerikick.com/wp-content/uploads/2012/04/Kids-Martial-Arts.jpg]
[slide url=http://www.amerikick.com/wp-content/uploads/2012/04/Character.jpg]
[slide url=http://www.amerikick.com/wp-content/uploads/2012/04/Determination.jpg]
[slide url=http://www.amerikick.com/wp-content/uploads/2012/04/Mixed-MA.jpg]
[slide url=http://www.amerikick.com/wp-content/uploads/2012/04/Family_slide.jpg]
[/slider]</div></div>

Css

.home #hero { 
background: url(http://www.amerikick.com/wp-content/uploads/2012/04/AmeriKick_Red_72dpi.jpg) no-repeat scroll center top transparent;
} 
#hlogo{
position:relative; 
z-index: 9999;
 position: absolute;
 top: -20px;
 left: -430px;
}

#slideform{
position:relative;
z-index:10;
}

#slider{
float:left;
width:645px;
height:435px;
padding-right:15px;
margin-left:-90px;
margin-top:100px;
border: 5px solid #CE0B0B;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color:#000000; 
}
/*Slider Arrows*/
.dayd_slider .orbit-wrapper div.slider-nav {
 display: none;
 }

#form{
float:right;
margin-right:-90px;
margin-top:100px;
}


/* Gravity Forms*/
body #gform_wrapper_2{
width:420px;
height:370px;
margin-top:1px;
padding:65px 20px 0;
border: 5px solid #CE0B0B;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: url("http://www.amerikick.com/wp-content/uploads/2012/04/Web-Offer.png") no-repeat scroll center top #FFFFFF;
}

[ralph.m]

I don't thin we've got the whole picture there. Are you able to provide a live link? It would make it so much easier to help you.

Edit:

Duh ... the URL is there in your code. I'll have a look.

[satori83]

I don't thin we've got the whole picture there. Are you able to provide a live link? It would make it so much easier to help you.

Edit:

Duh ... the URL is there in your code. I'll have a look.

Oops...Guess that would have helped huh?! But the great Ralph.m conquered! lol Everytime I design on my big Mac (lol...big mac) I realize I need to change stuff when I look at it on laptop or phone. I really should make time to watch the responsive course I bought on Udemy.

[ralph.m]

The first problem I see is that the logo is positioned way outside the container, so it will be off screen for a lot of users. It might be better to make it smaller and place it above the slider and form.

Also, your slider and form together are too wide for the main container anyway. You either need to reduce their widths or work out some other layout for the top of the page.

[ralph.m]

Oops...Guess that would have helped huh?! But the great Ralph.m conquered! lol Everytime I design on my big Mac (lol...big mac) I realize I need to change stuff when I look at it on laptop or phone. I really should make time to watch the responsive course I bought on Udemy.

Everytime I design on my big Mac (lol...big mac) I realize I need to change stuff when I look at it on laptop or phone.

At a minimum, scale your browser wider and narrower to see what effect this has.

[satori83]

So I should look at what size the existing container is and make sure all my code falls within those parameters? Also, is there any sort of rule of thumb when it comes to css to make sure it looks okay on other devices? Or is it just trial and error?

[ralph.m]

So I should look at what size the existing container is and make sure all my code falls within those parameters?

Yes, definitely. Some browsers won't even let the inner content be wider than the container.

is there any sort of rule of thumb when it comes to css to make sure it looks okay on other devices? Or is it just trial and error?

This is a bit topic. At the moment, there's a bit buzz around "responsive design", which is worth reading about.

[satori83]

Thanks Ralph! I worked on restyling and positioning the elements. It looks good on laptop, ipad, and phone What do you think?

[ralph.m]

Certainly is better—well done.

One thing I would recommend, however, is remove the logo from the background image and put it in the HTML itself, and include text with it (even if the text is hidden). The site name is very important (for SEO, accessibility etc.).

[satori83]

The text above it that says Amerikick in the navbar is actually the logo area. Does that have the same power or no?

[ralph.m]

The text above it that says Amerikick in the navbar is actually the logo area. Does that have the same power or no?

Yes, sorry, I didn't see that. That is indeed all you need. The fact that it's in the <h1> is powerful. Forget what I said above.

[satori83]

Thanks again for everything Ralph! Don't you ever sleep? lol

[ralph.m]

Thanks again for everything Ralph! Don't you ever sleep? lol

I sleep very well ... too well, indeed. I'm on the other side of the world from you. And it's bed time.