Skip to main content
jzutter
Known Participant
January 21, 2017
Answered

Go from two columns to one

  • January 21, 2017
  • 8 replies
  • 703 views

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

    This topic has been closed for replies.
    Correct answer Nancy OShea

    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

    8 replies

    jzutter
    jzutterAuthor
    Known Participant
    January 21, 2017

    Thanks.

    The divs were copy n pasted then inner diva changed.

    Will work on the next few days.

    jzutter
    jzutterAuthor
    Known Participant
    January 21, 2017

    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
    Nancy OSheaCorrect answer
    Community Expert
    January 21, 2017

    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

    Nancy O'Shea— Product User, Community Expert & Moderator
    jzutter
    jzutterAuthor
    Known Participant
    January 21, 2017

    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
    Community Expert
    January 21, 2017

    <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

    Nancy O'Shea— Product User, Community Expert & Moderator
    jzutter
    jzutterAuthor
    Known Participant
    January 21, 2017

    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

    Nancy OShea
    Community Expert
    January 21, 2017

    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

    Nancy O'Shea— Product User, Community Expert & Moderator
    jzutter
    jzutterAuthor
    Known Participant
    January 21, 2017

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

    jzutter
    jzutterAuthor
    Known Participant
    January 21, 2017

    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

    Brainiac
    January 21, 2017

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

    }

    }