Ответы пользователя по тегу HTML
  • Как сверстать этот элемент?

    @UthvfyV
    Попробуйте классу tobuy-shance__title_accent задать бэкграунд не цветом а картинкой. Картинка розового цвета с радиусом. Задайте длинну и background-position:; 100% 100%; и background-size: 100% 100%; Почему строка сломается? Задавать надо не в px а %. А если в коце сломается то вручную подгонять, я думаю в конце будет не много правок при помощи @media. Или же действительно каждой букве задайте span и соответсвенно border-radius (для каждой буквы). Задайте общий бэкграунд. И если строка сломается, то конец и начало, сломанного места будут с радиусом, Уж буква никак не сломается пополам. Только задавайте общий бэкграунд с учётом радиуса. Чтоб общий не перекрывал радиус. Или попробуйте через js. При помощи медиа запросов.
    <style>.tobuy-shance__title_accent {
    height: 40px;
    background-color: yellow;
    width: 500px;
    display: block;
    border: 1px solid #000;
    }</style>
    
    <span class="tobuy-shance__title_accent"></span>
    
    <script>
    function titleAccent(x) {
    var title = document.querySelector('.tobuy-shance__title_accent');
    if (x.matches) {
    // если размер экрана больше 1000px
    title.style.cssText = 'border-radius: 60px;';} 
    else {
    // если размер экрана меньше 1000px
    // здесь я умышленно указал radius 0 чтоб вы убелись что оно работает
    // если вместо border-radius: 0px; написать border-radius: 60px; то при лбюом размере экрана будет border-radius: 60px
    title.style.cssText = 'border-radius: 0px;';}}
    
    var x = window.matchMedia("(min-width: 1000px)")
    titleAccent(x);
    x.addListener(titleAccent);</script>
    Ответ написан
    4 комментария
  • Как d html css создать текст в 2 колонки не используя br?

    @UthvfyV
    в вики это делается с помощью таблиц. Делайте и вы. Они ж когда верстали сталкивались с проблемами. Значит нашли подходящее решение. Зачем повторять ошибки, и надо ли? Там жеш наверное не делитанты сидят. Значит другого решения не нашли.
    Ответ написан
    Комментировать
  • Как сделать волнистый блок в верстке?

    @UthvfyV
    Ответ написан
    Комментировать
  • Как сделать фоновое изображение кликабельным?

    @UthvfyV
    Daishinkan Daishinkan правильно написал, если body задать background то другого метода сделать body ссылкой наверно нет. При помощи js указать body перенаправить по ссылке. А если говорить о html то если хотите сделать background ссылкой, то body для этого мягко скажем не подходит. Можно сразу после <body> написать
    <style>
    .bg {
    width: 100%;
    height: 100%;
    left: 0;
    position: fixed;
    display: block;
    }
    #bg img {
    width: 100%;
    height: 100%;
    display: block;
    }</style>
    <body>
    <div id="bg" class="bg"><a href="javascript:void(0)" onclick="location.href='https://site.com'"><img src="snow.gif" alt=""></a></div>

    Некоторое содержимое body при этом может быть невидным. Поэтому там где содержимое невидно задайте ему position: relative
    Ответ написан
  • Как выставить элеменеты header'а в нужном месте?

    @UthvfyV
    если указываете ul то надо и написать и li. ul это список чего-то. А li это ячейка этого списка. Поэтому li и ul неотъямлемые части. Чтобы выставиль блоки в одну линию надо задать блокам свойство display, display: block или display: inline-block. Если использоваь display: block то надо задать дополнительно float: left, или же float: right. Но при свойстве float есть подводные камни, поэтому лучше использовать display: inline-block, здесь float не надо указывать. И никогда не задавайте длинну в пискселях, или в em, то шо при адаптивной вёрстке, т.е. при подгонке под размеры моб. устройств, будет шо попало.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="styles/header__main-page.css">
        <link rel="stylesheet" href="body.css">
        <title>Lorna Shore</title>
    	
    <style>
    body {
    margin: 0;
    width: 100%;
    }
    header {
    display: block;
    width: 90%;
    text-align: center;
    margin: 0 auto;
    padding: 10px 20px;
    }
    nav {
    display: inline-block;
    position: relative;
    width: 80%;
    text-align: center;
    vertical-align: top;
    margin: 0 auto;
    }
    .logo__header {
    width: 7%;
    text-align: left;
    display: inline-block;
    }
    .logo__header a {
    width: 80%;
    display: block;
    }
    ul {
    padding: 0;
    margin: 0;
    vertical-align: top;
    display: inline-block;
    list-style-type: none;
    }
    .nav-center {
    width: 30%;
    margin: 0 20px;
    display: inline-block;
    }
    .account-button__header {
    width: 5%;
    text-align: right;
    display: inline-block;
    }
    .account-button__header a {
    width: 70%;
    display: block;
    }
    img {
    width: 100%;
    display: block;
    }
    .left-nav__header {
    width: 25%;
    }
    .right-nav__header {
    width: 30%;
    }
    .left-nav__header li {
    display: inline-block;
    list-style-type: none;
    width: 40%;
    vertical-align: top;
    margin-left: 10px;
    }
    .right-nav__header li {
    display: inline-block;
    list-style-type: none;
    width: 28%;
    vertical-align: top;
    margin-left: 10px;
    }</style>
    </head>
    <body>
    <header>
    <div class="logo__header"><a href="#"><img src="https://i.ibb.co.com/KFYwpxb/logo-Lorna-Shore.png" alt="logo"></a></div>
    <nav class="nav">
    <ul class="left-nav__header">
    <li><a href="#"><img src="https://i.ibb.co.com/qNnh7Sy/SHOP.png" alt="shop"></a></li>
    <li><a href="#"><img src="https://i.ibb.co.com/W0zrw15/Concert-tours.png" alt="concert tours"></a></li></ul>
    
    <a class="nav-center" href="#"><img src="https://i.ibb.co.com/5TzzSMB/News.png" alt="news"></a>
    
    <ul class="right-nav__header">
    <li><a href="#"><img src="https://i.ibb.co.com/5TzzSMB/News.png" alt="news"></a></li>
    <li><a href="#"><img src="https://i.ibb.co.com/5W5Q8L4/About.png" alt="about"></a></li>
    <li><a href="#"><img class="contact-nav__header" src="https://i.ibb.co.com/Bt6jFP6/Contact.png" alt="contact"></a></li></ul></nav>
    <div class="account-button__header"><a href="#"><img src="https://i.ibb.co.com/tKTFL2M/account-icon.png" alt="account"></a></div></header>
    </body>
    </html>
    Ответ написан
    Комментировать
  • Как разместить блоки div (см. фото)?

    @UthvfyV
    <style>.heading {
      font-size: 28px;
      font-weight: bold;
      margin-left: calc(7% - 10px);
      display: inline-block;
      width: auto;
    }
    .about {
      width: 100%;
      margin: 0;
    display: block;
    text-align: center;
    }
    .number {
      display: inline-block;
      vertical-align: top;
      font-size: 14px;
      margin: 5px;
      font-weight: bold;
    }
    .subheading {
      display: block;
      vertical-align: top;
      width: 100%;
    }
    .column-title {
    display: inline-block;
    vertical-align: top;
    font-weight: bold;
    margin: 5px;
    line-height: 1;
    font-size: 28px;
    }
    .description {
      font-size: 16px;
      line-height: 1.5;
      margin-bottom: 10px;
    }
    .column {
      padding: 5px;
      width: 28%;
      margin: 10px;
      text-align: left;
      border-radius: 5px;
      display: inline-block;
    }</style>
    
    <div class="heading">/заголовок</div>
    <div class="about">
    <div class="column">
    <div class="subheading">
    <span class="number">01</span>
    <span class="column-title">Первое описание</span></div>
    <div class="description">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. 
    </div></div>
    <div class="column">
    <div class="subheading">
    <span class="number">02</span>
    <span class="column-title">Второе описание</span></div>
    <div class="description">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. 
    </div></div>
    <div class="column">
    <div class="subheading">
    <span class="number">03</span>
    <span class="column-title">Третье описание</span></div>
    <div class="description">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. 
    </div></div>
    <div class="column">
    <div class="subheading">
    <span class="number">04</span>
    <span class="column-title">Четвертое описание</span></div>
    <div class="description">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. 
    </div></div>
    <div class="column">
    <div class="subheading">
    <span class="number">05</span>
    <span class="column-title">Пятое описание</span></div>
    <div class="description">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. 
    </div></div>
    <div class="column">
    <div class="subheading">
    <span class="number">06</span>
    <span class="column-title">Шестое описание</span></div>
    <div class="description">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. 
    </div></div></div>
    Ответ написан
    Комментировать
  • Каким образом поставить обработчик событий на все элементы блока с элементами partWithNav--ul--li?

    @UthvfyV
    пусть каждая кнопка задаёт свой неповторимый класс. Задайте классы допустим button1 button2 ... . И допустим button1 добавляет redBackgroundColor1 button2 redBackgroundColor2 ... Тогда надо указать что при добавлении redBackgroundColor1, удаляется redBackgroundColor2 Допустим
    element.classList.add("redBackgroundColor1");
    element.classList.remove("redBackgroundColor2");
    Ответ написан
    Комментировать
  • Почему max-width и width разное отображение?

    @UthvfyV
    потому что у вас сайдбар резиновый. Задано условие max-width: 370px; Т.е. он подстраивается под внутренние размеры. Всё хорошо если у картинки max-width: 370px;, т.е. у неё фактически не 370px. Если задать фиксированную длину фото то сайдбар подстроится под неё. А вот почему размер уменьшается это вам надо внимательно посмотреть все стили. Может быть у фото фактический размер 318px. Проверьте, задано ли свойство дисплей всем участникам этого шоу. В первую очередь фото. Посмотрите так же не указано где-либо свойство display: flex, если да, то замените на block. Этот flex очень коварный. С одной стороны он делает что-то хорошее, а с другой, изменить это что-то хорошее невозможно или очень трудно, можно, но тогда прийдётся всё ломать. А если смысл в этой ломке? Короче этот flex большая морока. Внимательно проверьте все стили, если очень надо то покопайтесь и в js. Может где-то какое-то ограничение на фотку стоит. Та не может, а стоит, не обязательно в скрипте, может в стилях. Иногда стили не отображаются, например img:hover или :focus. Эти hover или :focus в большинстве случаев не видны, в DevTools редко показываются. Стоит где-нибудь img:focus и никаким образом ты это не увидишь. Попробуйте принудительно сказать что фото width: 370px;
    .photo {
    width: 370px !important;
    }

    Так же для проверки можете !important прописать всем тегам, принимающим участие в шоу. И не понятно, зачем фотке задавать размер в px. У вас я вижу и контейнеру задано width: 1230px; Как вы с такими размерами собираетесь делать адаптивную вёрстку? Никак. Чтобы всё было подогнано под размеры экрана надо первоначально задать в %. Или в px до определённого размера экрана, чтоб меньше морочиться с адаптацией. У контейнера длинна width: 100%; У фотки допустим 20%, или мах-width: 20%. То же самое и с сайдбаром. мах-width: 20%. Хотя обычно сайдбар имеет width: 20%. Зачем сайдбару подстраиваться под содержание. Посмотрите может где-то задано padding, не обязательно фотке, участникам тоже. padding, margin, min-width, где-нибудь before или after, проверьте их тоже на вшивость. text-align: justify; При justify получаются нерегулируемые отступы. Свойство float, может где-то что необтекается. Или наоборот наезжает. box-shadow. Обязательно обратите внимание position. Хотя здесь может быть и не влияет. line-height, transform, font-size, font-weight, чрезмерная или наоборот жирность увеличивает или уменьшает объекты, font-family, vertical-align, может задано vertical-align и параметр в px или в %, em, и т.д. Например vertical-align: 5px. Может у картинки бордер стоит. надо фотку помещать в блок, не обязательно div, можно p, span и пр., чтоб размер задавать не фотке а блоку, а фотке сделать 100%. Может задано свойство clip, которое обрезает фотку, transition. Может стоит медиа запрос, типа media screen and (max-width: 900px), что мол при таком-то размере экрана фотка или участник шоу имеет другой размер, text-decoration, animation, text-transform, list-style-type, может задано disc или circle, где-то. white-space, word-wrap. Короче ищите. Для начала укажите всем участникам !important, в первую очередь картинке. Если задано display: block укажите display: inline-block, или наоборот. И обязательно, у картинки должно присутствовать свойство display.
    Ответ написан
    1 комментарий
  • Как при наведении на один объект изменять стиль другого?

    @UthvfyV
    .block1:hover .block2 {
        display: inline;
      }
    Ответ написан
    Комментировать
  • Как сделать перемещение блока от движения мыши?

    @UthvfyV
    ищите в интернете свойства animation
    Ответ написан
    Комментировать
  • Не работают стили css, все подключено, в чем дело?

    @UthvfyV
    пропишите полный путь к файлу styles.css
    Ответ написан
    Комментировать
  • Как сверстать блок облако тегов?

    @UthvfyV
    <script>var radius = 120;
    var dtr = Math.PI/180;
    var d=300;
     
    var mcList = [];
    var active = false;
    var lasta = 1;
    var lastb = 1;
    var distr = true;
    var tspeed=10;
    var size=250;
     
    var mouseX=0;
    var mouseY=0;
     
    var howElliptical=1;
     
    var aA=null;
    var oDiv=null;
     
    window.onload=function ()
    {
    	var i=0;
    	var oTag=null;
    	
    	oDiv=document.getElementById('div1');
    	
    	aA=oDiv.getElementsByTagName('a');
    	
    	for(i=0;i<aA.length;i++)
    	{
    		oTag={};
    		
    		oTag.offsetWidth=aA[i].offsetWidth;
    		oTag.offsetHeight=aA[i].offsetHeight;
    		
    		mcList.push(oTag);
    	}
    	
    	sineCosine( 0,0,0 );
    	
    	positionAll();
    	
    	oDiv.onmouseover=function ()
    	{
    		active=true;
    	};
    	
    	oDiv.onmouseout=function ()
    	{
    		active=false;
    	};
    	
    	oDiv.onmousemove=function (ev)
    	{
    		var oEvent=window.event || ev;
    		
    		mouseX=oEvent.clientX-(oDiv.offsetLeft+oDiv.offsetWidth/2);
    		mouseY=oEvent.clientY-(oDiv.offsetTop+oDiv.offsetHeight/2);
    		
    		mouseX/=5;
    		mouseY/=5;
    	};
    	
    	setInterval(update, 30);
    };
     
    function update()
    {
    	var a;
    	var b;
    	
    	if(active)
    	{
    		a = (-Math.min( Math.max( -mouseY, -size ), size ) / radius ) * tspeed;
    		b = (Math.min( Math.max( -mouseX, -size ), size ) / radius ) * tspeed;
    	}
    	else
    	{
    		a = lasta * 0.98;
    		b = lastb * 0.98;
    	}
    	
    	lasta=a;
    	lastb=b;
    	
    	if(Math.abs(a)<=0.01 && Math.abs(b)<=0.01)
    	{
    		return;
    	}
    	
    	var c=0;
    	sineCosine(a,b,c);
    	for(var j=0;j<mcList.length;j++)
    	{
    		var rx1=mcList[j].cx;
    		var ry1=mcList[j].cy*ca+mcList[j].cz*(-sa);
    		var rz1=mcList[j].cy*sa+mcList[j].cz*ca;
    		
    		var rx2=rx1*cb+rz1*sb;
    		var ry2=ry1;
    		var rz2=rx1*(-sb)+rz1*cb;
    		
    		var rx3=rx2*cc+ry2*(-sc);
    		var ry3=rx2*sc+ry2*cc;
    		var rz3=rz2;
    		
    		mcList[j].cx=rx3;
    		mcList[j].cy=ry3;
    		mcList[j].cz=rz3;
    		
    		per=d/(d+rz3);
    		
    		mcList[j].x=(howElliptical*rx3*per)-(howElliptical*2);
    		mcList[j].y=ry3*per;
    		mcList[j].scale=per;
    		mcList[j].alpha=per;
    		
    		mcList[j].alpha=(mcList[j].alpha-0.6)*(10/6);
    	}
    	
    	doPosition();
    	depthSort();
    }
     
    function depthSort()
    {
    	var i=0;
    	var aTmp=[];
    	
    	for(i=0;i<aA.length;i++)
    	{
    		aTmp.push(aA[i]);
    	}
    	
    	aTmp.sort
    	(
    		function (vItem1, vItem2)
    		{
    			if(vItem1.cz>vItem2.cz)
    			{
    				return -1;
    			}
    			else if(vItem1.cz<vItem2.cz)
    			{
    				return 1;
    			}
    			else
    			{
    				return 0;
    			}
    		}
    	);
    	
    	for(i=0;i<aTmp.length;i++)
    	{
    		aTmp[i].style.zIndex=i;
    	}
    }
     
    function positionAll()
    {
    	var phi=0;
    	var theta=0;
    	var max=mcList.length;
    	var i=0;
    	
    	var aTmp=[];
    	var oFragment=document.createDocumentFragment();
    	
    	// Случайная сортировка
    	for(i=0;i<aA.length;i++)
    	{
    		aTmp.push(aA[i]);
    	}
    	
    	aTmp.sort
    	(
    		function ()
    		{
    			return Math.random()<0.5?1:-1;
    		}
    	);
    	
    	for(i=0;i<aTmp.length;i++)
    	{
    		oFragment.appendChild(aTmp[i]);
    	}
    	
    	oDiv.appendChild(oFragment);
    	
    	for( var i=1; i<max+1; i++){
    		if( distr )
    		{
    			phi = Math.acos(-1+(2*i-1)/max);
    			theta = Math.sqrt(max*Math.PI)*phi;
    		}
    		else
    		{
    			phi = Math.random()*(Math.PI);
    			theta = Math.random()*(2*Math.PI);
    		}
    		 // Преобразование координат
    		mcList[i-1].cx = radius * Math.cos(theta)*Math.sin(phi);
    		mcList[i-1].cy = radius * Math.sin(theta)*Math.sin(phi);
    		mcList[i-1].cz = radius * Math.cos(phi);
    		
    		aA[i-1].style.left=mcList[i-1].cx+oDiv.offsetWidth/2-mcList[i-1].offsetWidth/2+'px';
    		aA[i-1].style.top=mcList[i-1].cy+oDiv.offsetHeight/2-mcList[i-1].offsetHeight/2+'px';
    	}
    }
     
    function doPosition()
    {
    	var l=oDiv.offsetWidth/2;
    	var t=oDiv.offsetHeight/2;
    	for(var i=0;i<mcList.length;i++)
    	{
    		aA[i].style.left=mcList[i].cx+l-mcList[i].offsetWidth/2+'px';
    		aA[i].style.top=mcList[i].cy+t-mcList[i].offsetHeight/2+'px';
    		
    		aA[i].style.fontSize=Math.ceil(12*mcList[i].scale/2)+8+'px';
    		
    		aA[i].style.filter="alpha(opacity="+100*mcList[i].alpha+")";
    		aA[i].style.opacity=mcList[i].alpha;
    	}
    }
     
    function sineCosine( a, b, c)
    {
    	sa = Math.sin(a * dtr);
    	ca = Math.cos(a * dtr);
    	sb = Math.sin(b * dtr);
    	cb = Math.cos(b * dtr);
    	sc = Math.sin(c * dtr);
    	cc = Math.cos(c * dtr);
    }</script>

    <style>#div1 {
    	position:relative;
    	width:450px;
    	height:450px;
    	margin: 20px auto 0;
    }
    #div1 a {
    	position:absolute;
    	top:0px;
    	left:0px;
    	font-family: Microsoft YaHei;
    	color:#fff; 
    	font-weight:bold;
    	text-decoration:none;
    	padding: 3px 6px;
    }
    #div1 a:hover {
    	border: 1px solid #eee;
    	background: #000;
    }
    #div1 .blue {
    	color:blue;
    }
    #div1 .red {
    	color:red;
    }
    #div1 .yellow {
    	color:yellow;
    }
     
    p {
    	font: 16px Microsoft YaHei;
    	text-align: center;
    	color: #ba0c0c;
    }
    p a {
    	font-size: 14px;
    	color: #ba0c0c;
    }
    p a:hover {
    	color: red;
    }</style>

    <div id="div1">
    	 <a href=""> Пример 1 </a>
    	 <a href="" class="red"> Пример два </a>
    	 <a href=""> Пример три </a>
    	 <a href=""> Пример </a>
    	 <a href="" class="blue"> Пример </a>
    	 <a href=""> Пример </a>
    	 <a href="" class="red"> Пример </a>
    	 <a href="" class="yellow"> Пример </a>
    	 <a href=""> Пример </a>
    	 <a href="" class="red"> Пример </a>
    	 <a href=""> Пример </a>
    	 <a href="" class="blue"> Пример </a>
    	 <a href=""> Пример </a>
    	 <a href="" class="red"> Пример </a>
    	 <a href="" class="blue"> Пример </a>
    	 <a href=""> Пример </a>
    	 <a href="" class="blue"> Пример </a>
    	 <a href=""> Пример </a>
    	 <a href=""> Пример </a>
    	 <a href="" class="yellow"> Пример </a>
    	 <a href=""> Пример </a>
    </div>
    Ответ написан
    Комментировать
  • Как при клике вне элемента скрыть его, если элементов несколько?

    @UthvfyV
    "при клике вне открывшегося блока", так блоки открыты или нет? Я понял что открыты. Или как? Неважно. Назначьте разные классы для каждого блока. Блоку который вне всего этого хозяйства. дадим класс external. У одного из блоков класс filter1. Тогда
    <script>$(document).ready(function(){
    $(".external.").click(function(){
    $(".filter1").hide();});});</script>
    Т.е. при клике по внешнему external. filter1 закрывается. Однако если мы назначим всем 4 блокам один и тот же класс то они дружно будут взаимодействовать. Сюда $(".external."), $(".") можно вставлять не только класс или id, но название тега, допустим body или aside. Или можно наоборот, показать блок.
    <script>$(document).ready(function(){
    $(".external.").click(function(){
    $(".filter1").show();});});</script>
    Ответ написан
  • Как разместить элементы произвольной ширины друг под друга при соприкосновении?

    @UthvfyV
    Допустим. 3 блока.
    <div class="blocks">
    <div class="block block1"></div>
    <div class="block block2"></div>
    <div class="block block3"></div>
    </div>


    Тогда.
    .blocks {
    width: 100%;
    }
    .block {
    width: 30%;
    display: inline-block;
    }
    
    /* Уменьшаем размер экрана.
    размер экрана 1026px */
    
    @media screen and (max-width: 1026px) {
    .blocks {
    width: 80%;
    }}
    /* При длинне общего блока 80% от всей длинны экрана последнему блоку места не хватает, он спрыгивает вниз. */
    /* А при длинне общего блока 50% уже и 2 блоку мало места, и что вам и надо, они дружно выстраиваются один под другим */  
    @media screen and (max-width: 900px) {
    .blocks {
    width: 50%;
    }
    .block {
    width: 100%;
    }}


    media screen and (max-width: 900px) {}
    Вот этой конструкцией вы задаёте стили для элементов в зависимости от размера экрана. Т.е. при размере максимальной длинны экрана (max-width), width это длинна, 900px, ваши эдементы имеют такие-то параметры. Это назыается адаптивная вёрстка.

    media screen and (max-width: 1026px) Размер для media, к прмеру 1026px, определяйте по месту. Как определить, это уже другая тема. По желанию могу ответить.
    Ответ написан
    Комментировать