Would appreciate advice on resizing headers and text and no scroll bars

HTML & CSS
1

Hello all.
Using wp & bootstrap.
So far primarly working on getting the resizing done on the home page.
http://thebigmeow.us/
At full size it’s fine. no scroll bars.
As I resized it w/the media query it starts to get wacky
I can change the image
but how do I go about fixing the text in the header?

I thought that by using bootstrap in fluid mode that would be taken care of?

And any suggestions on how to get rid of the horizontal scroll bar once the browser gets smaller?
Thx
D

2

pdxSherpa,

Once upon a time, not so long ago, we mentioned how 100% widths plus padding + margin could cause such problems.

Container widths are still part of the problem but with a twist… A row with two 48% containers, such as #preHeader, that in turn contain fixed width objects will eventually be unable to maintain their 48% widths as the viewport narrows because the fixed width contents will overflow and generate the scrollbar. Making the outer containers “fluid” does not make their contents fluid if the contents have a fixed width. The #preHeader and <header> sections have several such problems. I did not continue to look further down the page.

You are using an HTML5 doctype… easily the most tolerant and forgiving of bad code in the land. If it flags something as an error it’s usually worth a sincere look. Your page shows 16 HTML errors. All should be examined.

Best wishes.

3

thank you ronPat! & i sure did remember that conversation. i took everything down and started from scratch.
Thank you for pointing out the fixed object issue.
also 16 errors. I believe you (entirely) but where were you able to see the count?
Actually after writing that i googled html5 validator…d’oh.
http://validator.w3.org/ is that the one you used?
18 & 5 warnings…yey. wonder who has a record.

4

oh…don’t feel as bad.
this are some of the error flagged

<!--  link rel="stylesheet" href="<!--?php bloginfo('template_url'); ?>/css/bo…

I was commenting out a link/code rather than deleting. can you suggest a better way?
D

5

I use the HTML Validator plugin for FireFox. The validator.w3.org validator is the best

The HTML comment marks cannot be nested. Defeat the inner marks (open and close) to satisfy the validator. I’m not aware if that’s a real problem for browsers, these days, but if the HTML5 validator balks, I guess the potential exists. It’s easy enough.