Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Removing content with Media Queries

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #35148
    Cyanoxide
    Participant

    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

    #90585
    indian
    Member

    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…

    #90586
    Cyanoxide
    Participant

    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

    #90587
    jamygolden
    Member

    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.

    #91005
    Cyanoxide
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.