Заголовок h2 выходит за рамки блока

[volshebnyi]

Здравствуйте!

 

Есть блок с предпросмотром товара. В зависимости от разрешения блок меняет свою ширину. После этого заголовок выходит за рамки блока. Вот пример:

http://jsfiddle.net/cp1eLaru/1/

 

Помогите, пожалуйста, решить следующее:

 

1. При изменении ширины заголовок h2 не должен выходить за рамки блока.

2. При наведении курсора на весь блок, заголовок h2 должен изменять цвет.

 

Заранее благодарю за помощь!

[DivMan]

http://jsfiddle.net/cp1eLaru/2/

 

Можно ещё для .product-item

 

добавить text-decoration: none;

Edited March 9, 2015 by DivMan

[Светлана Г.]

2. При наведении курсора на весь блок, заголовок h2 должен изменять цвет.

http://jsfiddle.net/cp1eLaru/6/

Edited March 9, 2015 by Светлана Г.

[volshebnyi]

http://jsfiddle.net/cp1eLaru/2/

 

Можно ещё для .product-item

 

добавить text-decoration: none;

 

Мне необходимо, что бы заголовок h2 сжимался исходя из ширины .product-item. То есть - не блок подстраивался под заголовок, а заголовок под ширину блока.

Edited March 10, 2015 by volshebnyi

[Vlad]

Используйте единицы vw. 1vw = 1% от ширины вьюпорта.

.product-item>h2{    font-size: 4vw;}

[volshebnyi]

 

Используйте единицы vw. 1vw = 1% от ширины вьюпорта.

.product-item>h2{    font-size: 4vw;}

 

Ух ты! Впервые об этом слышу! Спасибо огромное! Здесь есть где об этом почитать подробнее?

[Vlad]

Вот здесь можете про vw почитать. На таблицу с браузерами вначале смотреть - IE9+ если не пугает, то нормально всё.

https://developer.mozilla.org/en-US/docs/Web/CSS/length#vw

 

Ещё подумал, что можно минимальную ширину блоку установить через min-width, тогда не будет такого что заголовок выходит за пределы блока и без этих единиц.

[volshebnyi]

Вот здесь можете про vw почитать. На таблицу с браузерами вначале смотреть - IE9+ если не пугает, то нормально всё.

https://developer.mozilla.org/en-US/docs/Web/CSS/length#vw

 

Ещё подумал, что можно минимальную ширину блоку установить через min-width, тогда не будет такого что заголовок выходит за пределы блока и без этих единиц.

 

min-width какому именно блоку присвоить?

[Vlad]

product-item

[volshebnyi]

product-item

 

У меня product-item находится в бутсреповском контейнере - <div class="col-xs-12 col-sm-6 col-md-3">