ウィンドウ幅に合わせて自動で画像／テキストをリサイズしたい。

Question

HPを作成しています。
http://number093.com/

テンプレートLEFTYを使っています。
http://justfreethemes.com/lefty-free-wordpress-theme/

左上のロゴと下の説明文
”Photo/Food/Design/Trip/Snow board/etc...”

なのですがウィンドウのリサイズに対応できず、ウィンドウを小さくしたときに
はみ出てしまいます。テキストは自動的に改行してほしいです。

CSSの以下の記述が関係するかと思うのですが助言いただけないでしょうか。

----------------------------------------------------------- /
#masthead { position: relative; margin-bottom: 30px; }
.logo { float: left }
.logo a { font-weight: 600; padding: 0px; margin: 0 0 20px; text-decoration: none; display: inline-block; }
.logo h1 a, .logo h2 a { color: #fff; padding: 10px 20px; background: #e32d40; }
.logo h1 a:hover, .logo h2 a:hover { color: #fff; text-decoration: none; }
.logo img { display: block; max-width: 250px; }
.logo h1, .logo h2 { font-size: 36px; margin: 0; line-height: 1.3em; font-family: 'Droid Serif', Helvetica Neue, Helvetica, Arial, Sans-serif; margin-bottom: 25px; }
p#site-description { margin: 0; color: #F8F8FF; line-height: 1.6em; }
/ Posts
----------------------------------------------------------- */

よろしくお願いします。

Answer 1

ロゴ画像への可変指示がないので、同階層のテキストがそれに習って動いていません。
.logo img { display: block; max-width: 250px; }
↑これに「width:100%」加えるといいかと思います。

.logo img { display: block; max-width: 250px; width: 100%; }

Comments

[number093]

早速反映してみました。多少よくなりましたが、やはりウインドウ幅を狭めるとはみ出す状況が生じるようです。

[number093]

Photo/Food/Design/Trip/Snow board/etc...
スラッシュの前後にスペースを入れることで改行が行われ、合わせてロゴもウインドウサイズに可変するようになりました。回答ありがとうございました。