Go from two columns to one

Thanks.

The divs were copy n pasted then inner diva changed.

Will work on the next few days.

i don't understand though why one div on the major and family rides pages give a error but the save dive towrds the bottom don't.

if I use div class should that solbe the CSS issurs I'm having from size to size?

how do I do the current class tags if i swi the rest over?

thanks for your help!!!!

When I get home from work i am going to go thru the error codes.

I need to get this site done this week. it's stressing me out.

i get your point and will look at the html error. I have been looking at them all along and some have been fixed. what i dont get with these errors is why does a dubplicate error show up on line for the mardi gras fun house and not the scooter 1 line.

still need help with the css

You might want to retreat & focus on your HTML code errors before you go chasing down layout issues in your CSS.  When your HTML is this badly broken (300 errors), you're spinning your wheels with layout concerns.

Showing results for http://zutterdesign.com/bates/family_major_rides.htm - Nu Html Checker

Nancy

Im also trying to do this same effect on the contact page and no luck.

i do that and i dont get the desired results.  please see previous link to see what it does.

I have changed rideboxleft to rideleft and done the same to  rideboxright is now rideright

To change properties of elements at specific browser widths you use media queries.

So in your BateBrosCSS.css file the css selectors which control the boxes are these below:

/*Rides Pager*/

#rideboxleft{width:40%;background-color:#DDDBDB; font-size:23px; color:#ffffff;border-style: outset;display:inline-block;}

#rideboxright{width:40%; background-color:#DDDBDB; font-size:23px; color:#ffffff;border-style: outset;display:inline-block;}

So you would insert the media queries below directly after the css selectors and change the css properties as shown:

@media screen and (max-width: 769px) {

#rideboxleft{

width: 70%;

display: block;

margin: 0 auto 25px auto;

}

#rideboxright{

width: 70%;

display: block;

margin: 0 auto 25px auto;

}

}

@media screen and (max-width: 480px) {

#rideboxleft{

width: 90%;

}

#rideboxright{

width: 90%;

}

}