Ребят, как адаптировать и расширить текст?

Question

[Vadya Tim]

Доброго времени суток!

Ребят, помогите пожалуйста с bootstrap!

Приложил фото. Нужно этот текст расширить на весь экран!

Но при расширении (расширяю размер текста px в CSS) - он криво встает, на телефоне вообще вылазит за пределы.

Помогите исправить эту проблему! Спасибо!

Comments

[sergey]

ну и где код? или ссылка на проект? или Вы решили что здесь экстрасенсы?

[Vadya Tim]

<section id="fh5co-home" data-section="home" style="background-image: url(images/full_image_2.jpg);" ">
	
		<div class="container-fluid">
			<div class="text-wrap">
				<div class="text-inner ">
					<div class="row">
						<div class="col-md-8 col-md-offset-2">
						
				
						
						
						
							<h1 class="to-animate">Маркетинг для Вашего бизнеса под ключ! </h1>
					
							<h2 class="to-animate">От создания сайтов, лендингов и интернет-магазинов<br> до настройки рекламных кампаний </a></h2>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="slant"></div>
	</section>

[sergey]

tiim07: на каком расширении Вы хотите что бы он растягивался во всю ширину экрана?

[Vadya Tim]

Sagan: хочу чтобы на компьютерной версии (к примеру от 992px) был размер текста 90px, соответственно при уменьшении экрана текст становился по размеру меньше.

[sergey]

tiim07: обновил ответ

Answer 1

[sergey]

Необходимо убрать следующее:
//col-md-8 col-md-offset-2

jsfiddle
с размером на разных расширениях можете поиграться, там все просто

Comments

[Vadya Tim]

вот, что получается..

[Vadya Tim]

[sergey]

tiim07: ну так уменьшите размер текста для телефонов

@media only screen and (min-width: 320px) and (max-width: 479px) {
	h1{
		font-size: 25px;
	}
}

[Vadya Tim]

Sagan: все равно также отображается..

[sergey]

tiim07: тогда проблема с кодом, что-то перебивает возможно, откройте jsfiddle и посмотрите, все ок, текст уменьшается при уменьшении окна браузера

а и да у вас там ошибок графических в коде есть, к примеру:

<h2 class="to-animate">От создания сайтов, лендингов и интернет-магазинов<br> до настройки рекламных кампаний </a></h2>

откуда здесь тег a, удалите его.

<section id="fh5co-home" data-section="home" style="background-image: url(images/full_image_2.jpg);" ">

лишние кавычки в конце и т.д

самое главное когда проверяете на телефон, чистите кеш

[Vadya Tim]

Sagan: все равно браузер съедает текст, и не видно.. проверил вроде все ок в коде

[sergey]

tiim07: киньте ссылку на проект ибо я не понимаю что там у вас происходит, все же просто это bootstrap, кстати он подключен у вас?

[Vadya Tim]

Sagan: конечно подключен)

mark-tim.ru

[sergey]

tiim07: вы версткой давно занимаетесь? если да то ПКМ откройте консоль разработчика, уменьшите окно браузера допустим до 320px и посмотрите что медиа запросы не применились, их перебивают ваши стили

#fh5co-home .text-inner h1 {
    font-size: 90px;
    color: white;
}

@media only screen and (max-width: 479px) and (min-width: 320px){
h1 {
    font-size: 25px;
  }
}

для того что бы правильно все работало и стили не перебивались, необходимо их правильно записывать

@media only screen and (max-width: 479px) and (min-width: 320px)
#fh5co-home .text-inner h1 {
    font-size: 25px;
}

[Vadya Tim]

Sagan: версткой только недавно начал заниматься, учусь)) спасибо, щас попробую

[sergey]

tiim07: тоесть я Вам навел пример медиа запросов для h1, но у вас же не просто h1? а #fh5co-home .text-inner h1

[Vadya Tim]

сделал так... все равно не уменьшает и все...

[sergey]

tiim07: значит не правильно делаете, там все просто

[sergey]

tiim07: и я не вижу что Вы сделали, медиа запросы вообще пропали

[sergey]

tiim07:

@media only screen and (max-width: 479px) and (min-width: 320px){
#fh5co-home .text-inner h1 {
    font-size: 25px!important;
}

вот так 100% в любом случае уменьшит

[Vadya Tim]

Sagan: посмотрите, я обновил mark-tim.ru

[sergey]

tiim07: что Вы обновили? где медиа запросы? где стили под них, ну откройте консоль и сами посмотрите

[sergey]

tiim07:
Вы очень не внимательный как для разработки
что это за запись?

@media only screen and (max-width: 479px) and (min-width: 120px)
#fh5co-home .text-inner h1 {
    font-size: 20px;
}

найдите ошибку и исправьте

[sergey]

tiim07:

@media only screen and (max-width: 479px) and (min-width: 320px){
#fh5co-home .text-inner h1 {
    font-size: 25px;
}

[sergey]

tiim07: я сам подставил данные в код, все работает

[Vadya Tim]

Sagan: вроде работает - mark-tim.ru

[sergey]

tiim07: да, но important можете убрать, он ни к чему

[sergey]

tiim07: если все ок, то мой ответ обозначьте правильным