Grow your CSS skills. Land your dream job.

Removing content with Media Queries

  • # November 13, 2011 at 5:10 pm

    Hey there, I’ve recently been having a lot of fun with media queries and I’ve been incorporating them in most of my projects. Though I hit a wall on my most recent project. Initially on my full size version my footer has four sections all in line, my first media query was going to change it from four in a row to two in a row then another two below that.

    That was all fine but I needed to make a mid range version between the two and as a result I’m left with an uneven footer with three sections on top and one on the bottom. The only thing I can think of to fix this is to hide the last box with display:none or visibility:hidden but the height of the box is still there, I’ve tried setting the width and height of the box to 0px and all of the different positioning to no avail.

    No doubt this can be fixed with something simple that I have overlooked so if anyone has an answer please let me know. Alternatively if anyone has a solution to make it seem less uneven that does not remove the box I welcome your suggestions.

    http://www.jamiepates.co.uk/Express

    # November 13, 2011 at 9:43 pm

    the boxes need to stay the same size? why don’t you just clear the second two boxes below the first two and make everything 50% width? that would look consistant…

    # November 13, 2011 at 10:44 pm

    But doing that on such a wide width would not match up with the size of everything else, I realise that I didn’t include a link so I will add one so you can get a better understanding:

    http://www.jamiepates.co.uk/Express

    # November 14, 2011 at 2:46 am

    You should add “display: none” to the last list item, not the last

    .foot-sec > li:last-child { display: none; }

    Also, I’m not sure if you’re aware, but list items should be wrapped in an <ul> element. Currently you’re wrapping the list items in a <div> element.

    # November 20, 2011 at 3:28 pm

    Cheers that did the job, I was targeting the section and not the last child and I’m aware that I don’t have

      around them, it’s because I’ve got a list inside that list and it was the only way I could think of doing it so I could target list items in the original list and exclude ones in the list within that list.

      Inception much?

      I’ll figure out a better solution once I’ve got everything working correctly.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".