Go from two columns to one

[jzutter]

how do i make the gray boxes got from two colums to one when the screen is smaller than 769 Pixels on this Bates Brothers Amusements: Family & Major Rides

[osgood_]

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%;

}

}

[jzutter]

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

[jzutter]

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

[Nancy OShea]

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

[jzutter]

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

[jzutter]

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.

[Nancy OShea]

<center> is an obsolete tag.  It's not allowed in HTML5.  Use CSS to center text and containers.

IDs are unique identifiers and you cannot use them more than 1 x per page. If you want to reuse for style purposes, use a .class instead of ID.

ALT attributes in <img> tags must by expressed like this

     alt="shot"  without the colon.

Nancy

[jzutter]

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!!!!

[Nancy OShea · Accepted solution]

Are you certain it's named exactly the same way in both places? 

HTML is your structure.  Don't worry about CSS until your get your structure in order.

Some friendly advice, use shorter selector names.  Use classes for everything except when you need a unique  ID to target a specific element with JavaScript.

Nancy

[jzutter]

Thanks.

The divs were copy n pasted then inner diva changed.

Will work on the next few days.