Следите за новостями любимого конструктора сайтов uCoz в социальных сетях!
При перемещение кода из глобального блока $GLOBAL_HHH$ в блок "Главная страница" ломается код раздела <section class="features">, решит ли проблему отображения добавление стилей с этого глобального блока в отдельный css файл?
http://tourism86.ucoz.net/index/shablon/0-10#
http://tourism86.ucoz.net/
Стили и так перемещал вместе со всем содержимым глобального блока, не подскажете, где в стилях нужно исправить? На сколько я понимаю, для раздела <section class="features"> дополнительно нужно стили более конкретно указывать - под эту секцию, но что именно нужно сделать? Некоторые стили не применяются, даже с указанием важности.
Прежде всего в блок хеад пропишите подключение файла стилей, между тегов
<head>сюда</head>
вставить:
<link type="text/css" rel="stylesheet" href="/_st/my.css" />
и в самый низ под тем блоком что вы перенесли, вставить стили:
<style>/*------------- General -------------*/
@media (max-width: 1000px){
section{ padding: 100px 50px; }
}
@media (max-width: 600px){
section{ padding: 80px 30px; }
section h3.title{ color: #414a4f; text-transform: capitalize; font: bold 32px 'Open Sans', sans-serif; margin-bottom: 35px; text-align: center; }
section p{ text-align: center; margin-bottom: 35px; padding: 0 20px; line-height: 2; }
ul.grid{ width: 100%; display: flex; flex-wrap: wrap; justify-content: center; }
/*-------------------- Our Work Section ---------------------*/
.оur-work{ background-color: #fff; }
.our-work .grid li{ padding: 20px; height: 350px; border-radius: 3px;
background-clip: content-box; background-size: cover; background-position: center; background-color: #333; }
.our-work .grid li.small{ flex-basis: 40%; }
.our-work .grid li.large{ flex-basis: 60%; }
.our-work .grid li.small, .our-work .grid li.large{ flex-basis: 100%; }
/*---------------------- Features Section ----------------------*/
.fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .features .grid li i { font-size: 50px; color: #2196F3; margin-bottom: 25px; } .features{ background-color: #f7f7f7; }
.features .grid li{ padding: 0 30px; flex-basis: 33%; text-align: center; }
.features .grid li i{ font-size: 50px; color: #2196F3; margin-bottom: 25px; }
.features .grid li h4{ color: #555; font-size: 20px; margin-bottom: 25px; }
.features .grid li p{ margin: 0; }
.features .grid li{ flex-basis: 70%; margin-bottom: 65px; }
.features .grid li:last-child{ margin-bottom: 0; }
.features .grid li{ flex-basis: 100%; }
/*---------------- Hero Section ----------------*/
.hero{ position: relative; justify-content: center; min-height: 100vh; color: #fff; text-align: center; }
.hero .background-image{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-color: #2196F3; z-index: -1; }
.hero .background-image:after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #414a4f; opacity: 0.75; }
.hero h1{ font: bold 60px 'Open Sans', sans-serif; margin-bottom: 15px; display: inline-grid; padding-top: 20%; }
.hero h3{ font: normal 28px 'Open Sans', sans-serif; margin-bottom: 40px; }
.hero a.btn{ padding: 20px 46px; }
@media (max-width: 800px){
.hero{ min-height: 600px; }
.hero h1{ font-size: 48px; }
.hero h3{ font-size: 24px; }
.hero a.btn{ padding: 15px 40px; }
/* -- Demo ads -- */
@media (max-width: 1200px) { #bsaHolder{ display:none;} }</style>
после очистить кеш https://ukit.com/ru/help/kak-ochistit-cahe в браузере и готово.