Ответы пользователя по тегу CSS
  • Почему div исчезает при нажатии tab?

    TemaSM
    @TemaSM
    Fullstack, DevOps, InfSec
    Это происходит потому что классу .body задан режим отображения в виде display: flex с направлением flex-direction: row - таким образом два элемента выстраиваются на странице друг за другом в ряд по горизонтали (row), а свойство overflow: hidden скрывает содержимое выходящее за границы элемента, которому был назначен класс .body.
    Отключив свойство overflow через DevTools браузера или в коде, увидите ту самую вторую кнопку (её маленький кусочек), а на странице в браузере появится горизонтальный скроллбар. Либо можно через DevTools просто навести на второй div и браузер подсветит где этот элемент находится в окне, скриншот:
    609818e60650e671540025.png
    Почему при нажатии tab одна кнопка будто пропадает, а другая появляется?
    - потому что при помощи tab вы изменяете фокус с одного элемента на другой, и браузер автоматически фокусирует вас на вторую кнопку, учитывая при этом значение свойства overflow - оно как раз и скрывает от нашего взора вторую, не "активную" кнопку (потому что она становится за пределами фокуса, и не вмещается в текущий viewport страницы).
    Как исправить это поведение в браузере?
    - способов несколько и зависит от того что хотите в итоге получить.
    Но пожалуй самыми правильными в рамках текущего кода будут один из этих:
    1. Установить значение column в свойство flex-direction у класса .body60981b2c2c938810907091.png
    2. Убрать свойство flex-shrink у CSS селектора .body>div, тогда браузер не будет пытаться переносить элементы на новую строку/колонку согласно настройкам flex
      60981bd9cca60364324714.png
    Ответ написан
    Комментировать
  • Как сделать адаптивную верстку под мобильные устройства в этом коде?

    TemaSM
    @TemaSM
    Fullstack, DevOps, InfSec
    Код:
    @media screen and (max-width: 980px)
    {
    	.wrap {
    	width: inherit;
    	min-width: inherit;
    	}
    	.blockapps {
    	width: inherit;
    	}
    }
    
    @media screen and (min-width: 980px)
    {
    
    	.wrap {
    	width: 1060px;	
    	min-width: 1060px;
    	}
    	.blockapps {
    	width: 800px;
    	}
    
    }

    #UPD: Для отображения блоков вертикально на мобильном устройстве,необходимо добавить в HEAD сектор страницы этот код:
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
    Ответ написан
    Комментировать