Форум PHP программистов > Помощь для чайников

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Страницы: 1, 2

Vladimir_Tuev

2.04.2017 - 14:20

Привет специалистам.

Помогите советом.

Есть <div class="one">

Обычное его свойство
width: 500px;

@media screen and (max-width:768px){
.one{
width: 100% !important;
}
}

У меня не работает изменение ширины. Остается 500px. Как можно поменять ширину данного блока?

_____________
"ЩИТ IT" | Комплексное IT обслуживание

qpurypaHT

2.04.2017 - 14:30

При сужении бегунок на блоке .one?

_____________
Если долго в одних стенах живешь, ты с ними сростаешься

Vladimir_Tuev

2.04.2017 - 14:36

Нет. Бегунков нет.
Суть какая. на странице пару div class ="one". Стоят в линию. у них четкие размеры. Условно 500*500. При уменьшении до мобильных версий хочу, чтобы эти блоки принимали 100% ширины

_____________
"ЩИТ IT" | Комплексное IT обслуживание

qpurypaHT

2.04.2017 - 14:43

На стороннем сайте применение стилей или на своем?

_____________
Если долго в одних стенах живешь, ты с ними сростаешься

sergeiss

2.04.2017 - 14:47

Цитата (Vladimir_Tuev @ 2.04.2017 - 14:20)

Обычное его свойство
width: 500px;

Как именно это прописано в CSS? Только для класса 'one' или что-нибудь типа такого?

.div-parent .one {
  width: 500px;
}

То есть, покажи структуру, где находится твой ДИВ и как для него прописана ширина при больших размерах.

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

Vladimir_Tuev

2.04.2017 - 15:31

http://грузонософф.рф
на главной странице class="box"
3 блока в ряд стоят
нужно сделать, чтобы при уменьшении ширины окна каждый блок 100% стал и встави друг под другом.

@media screen and (max-width:768px){
#content{
width: 768px !important;
}
.box{
width:768px;
display: block;
}
#slider_con{
display: none;
}
}

_____________
"ЩИТ IT" | Комплексное IT обслуживание

qpurypaHT

2.04.2017 - 16:19


@media screen and (max-width:768px){
  .box{float:none;width:100%;margin:0;}
}

_____________
Если долго в одних стенах живешь, ты с ними сростаешься

qpurypaHT

2.04.2017 - 16:30

Кто вообще у Вас версткой занимался?
открываешь код а там рабочий блок чуть ли не в 2х упакованный

Даже в id="header" id="logo"
есть float:left;

а в id="header" нет overflow: auto; в результате на выходе блоки шапки не упираются ни во что, и выходят за поля id="header"

_____________
Если долго в одних стенах живешь, ты с ними сростаешься

qpurypaHT

2.04.2017 - 16:33

Забавно, чтобы дать ваш номер кому-то, его нужно печатать руками, так как он картинкой

_____________
Если долго в одних стенах живешь, ты с ними сростаешься

sergeiss

2.04.2017 - 16:42

Vladimir_Tuev, у тебя там логическая ошибка :)
У тебя так в CSS написано

	/* home page left side boxes  */
	@media screen and (max-width:768px){
		#content{
		width: 768px !important;
		}
		.box{
			width:768px;
			display: block;
		}
		#slider_con{
			display: none;
		}
	}
	
	.box{
		width:286px;
		float:left;
		margin:20px 20px 0px 0px;	
		position:relative;
		overflow:hidden;
	}

Но!!!

Все описалова media должны идти уже после. Точнее, сначала ты делаешь все CSS, которые для широкого экрана, потом для более узкого, затем для еще более узкого (при наличии) и т.д.

То есть, твой CSS должен быть таким:

	/* home page left side boxes  */

	.box{
		width:286px;
		float:left;
		margin:20px 20px 0px 0px;	
		position:relative;
		overflow:hidden;
	}

	@media screen and (max-width:768px){
		#content{
		width: 768px !important;
		}
		.box{
			width:768px;
			display: block;
		}
		#slider_con{
			display: none;
		}
	}

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

Invis1ble

2.04.2017 - 16:51

Вообще-то, нормальной практикой считается сначала писать CSS под минимальный размер дисплея, затем через min-width переопределять стили.

_____________

Профессиональная разработка на заказ

Я на GitHub | второй профиль

waldicom

2.04.2017 - 17:27

Цитата (sergeiss @ 2.04.2017 - 13:42)

Все описалова media должны идти уже после. Точнее, сначала ты делаешь все CSS, которые для широкого экрана, потом для более узкого, затем для еще более узкого (при наличии) и т.д.

Довольно часто используется подход mobile first. Т.е. от маленького экрана к большому. Как по мне, так лучше его использовать

_____________
Свои мозги еще никто не отменял.
Телепатов нету.

Vladimir_Tuev

2.04.2017 - 17:30

sergeiss профи.

_____________
"ЩИТ IT" | Комплексное IT обслуживание

qpurypaHT

2.04.2017 - 17:42

Цитата (Vladimir_Tuev @ 2.04.2017 - 19:30)

sergeiss профи.

ТО что вы написали и стерли был бред, как в css у вас оказался html?

_____________
Если долго в одних стенах живешь, ты с ними сростаешься

qpurypaHT

2.04.2017 - 17:48

Цитата

Вообще-то, нормальной практикой считается сначала писать CSS под минимальный размер дисплея, затем через min-width переопределять стили.

Цитата

Довольно часто используется подход mobile first. Т.е. от маленького экрана к большому. Как по мне, так лучше его использовать

Согласен, когда есть шаблон нарисованный

Я например шаблоны пишу с чистого листа, и мозгую дизайн по ходу дела, у меня такая техника, так как я не дизайнер.

Вот пишу маме интернет магазин, сначала собрал шкуру целиком, потом заточил "пока что" под 240х320

Работает на ура

так же есть применения float для большой версии, все обрезал, может просто своим методом набил руку

_____________
Если долго в одних стенах живешь, ты с ними сростаешься

Быстрый ответ:

Здесь расположена полная версия этой страницы.