Media query query! Not behaving predictably.

Discussion in 'CSS' started by Cornucopia, Oct 18, 2013.

  1. #1
    I’ve written various media queries into my stylesheet to position a contact block in my header. It goes next to the logo on wider screens and beneath on narrower ones. Most of the sizes are appearing as I would expect, having written specific media query css, but in certain sizes (between 640px wide and 720px wide) the contact block always drops below the logo, even though there is plenty of space to the side. I’ve checked for unnoticed margins but there appear to be none. It’s the first time I’ve written media queries (not sure I’ve done it the best way anyway – probably lots of conflicts) so I would really appreciate if an experienced person could have a quick look and tell me where I’m going wrong. I might be missing something terribly obvious but I’ve spent hours trying to resolve this. The site is http://www.viva-communications.co.uk/wp1/

    Many thanks, in anticipation of someone’s help!
     
    Cornucopia, Oct 18, 2013 IP
  2. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #2
    That behavior is a direct consequence of putting width:520px to .span6. The solution, however, isn't deleting that line in your style sheet, mind you. That would be because your markup and your style sheet were poorly written (I'm not going to detail that here) before you started adding media queries to make the website responsive. The simplest solution IMHO would be to delete that and .span6 {max-width:400px}, but that's not what I would've done. Ditching that HTML5 + bootstrap stupidity would be my first step.
     
    wiicker95, Oct 18, 2013 IP
  3. Cornucopia

    Cornucopia Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    Thanks for taking the time to reply. I've actually used a responsive Wordpress theme but just wanted to refine what had been provided, which I wasn't very satisfied with. I'm not an expert and have just tried to use my very limited css knowledge. Hence I have no idea what you mean about 'Ditching that HTML5 + bootstrap stupidity' and hence am not about to do that! The theme I have used is far from perfect but I just wanted to make the best out of it (I'm too far down the line to change at this stage). I've just been guessing what to write in my child theme css (custom.css). I just need some constructive help to make the best of a bad job as I know I've got in a bit of a muddle. Thank you.
     
    Cornucopia, Oct 18, 2013 IP