-
Posts
2 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by Masya
-
-
Здравствуйте, я новичок в сайтостроении и у меня возникла одна проблема при адаптации страницы, она состоит в том ,что в max-width ,при заданной ширине, не хочет работать изменение отступов (padding и margin), хотя flex-direction: column; работает. Жуткое ощущение глупой ошибки ,которую не могу найти. Заранее спасибо за помощь.
Ниже HTML и CSS код:
<header>
<div class="header">
<div class="wrap">
<div class="logo header_left">
<a href="#">
<img src="images/logo.png" alt="Логотип">
</a>
</div>
<div class="header_right">
<div id="topmenu">
<p>
<a href="#">About</a>
<span>/</span>
<a href="#">Blog</a>
<span>/</span>
<a href="#">Contact</a>
<span>/</span>
</p>
</div>
<div id="social">
<a class="twitter" href="#"></a>
<a class="vimeo" href="#"></a>
<a class="facebook" href="#"></a>
<a class="instagram" href="#"></a>
<a class="dribbble" href="#"></a>
<a class="reddit" href="#"></a>
</div>
</div>
</div>
</div>
</header>——————————————————————————————————————————————————--
#container {
margin: 0 auto;
}
#container .header {
border-bottom: 1px solid #bfbfbf;
box-shadow: 0 0 3px #dbdbdb;
padding-top: 6px;
}
#container .header .wrap {
display: flex;
justify-content: space-between;
padding: 0;
}
@media (max-width: 650px) {
.header .wrap {
flex-direction: column;
padding: 0 3px;
margin-bottom: 5px;
}
.header #socials {
margin-left: 5px;
}
.header #socials a:last-child {
margin-right: 2px;;
}
}
#container .header .header_left {
align-self: center;
}
#container .header .header_right {
display: flex;
justify-content: space-between;
}
#container #topmenu {
color: #8e8e8e;
padding-top: 6px;
}
#container #topmenu a {
color: #8e8e8e;
text-decoration: none;
}
#container #topmenu a:hover {
color: #dd5555;
}
#container #social {
display: flex;
margin-left: 20px;
margin-right: 50px;
}
#social a {
margin-top: 9px;
margin: 8px 10px;
}
.twitter {
background: url("../images/twitter_un.png") no-repeat;
height: 11px;
width: 13px;
cursor: pointer;
}
.twitter:hover {
background: url("../images/twitter.png") no-repeat;
height: 11px;
width: 13px;
}
.dribbble {
background: url("../images/dribbble_un.png") no-repeat;
height: 13px;
width: 13px;
cursor: pointer;
}
.dribbble:hover {
background: url("../images/dribbble.png") no-repeat;
height: 13px;
width: 13px;
}
.vimeo {
background: url("../images/vimeo_un.png") no-repeat;
height: 12px;
width: 13px;
cursor: pointer;
}
.vimeo:hover {
background: url("../images/vimeo.png") no-repeat;
height: 12px;
width: 13px;
}
.facebook {
background: url("../images/facebook_un.png") no-repeat;
height: 13px;
width: 7px;
cursor: pointer;
}
.facebook:hover {
background: url("../images/facebook.png") no-repeat;
height: 13px;
width: 7px;
}
.instagram {
background: url("../images/instagram_un.png") no-repeat;
height: 12px;
width: 12px;
cursor: pointer;
}
.instagram:hover {
background: url("../images/instagram.png") no-repeat;
height: 12px;
width: 12px;
}
.reddit {
background: url("../images/reddit_un.png") no-repeat;
height: 11px;
width: 13px;
cursor: pointer;
}
.reddit:hover {
background: url("../images/reddit.png") no-repeat;
height: 11px;
width: 13px;
}
Проблема в адаптивной верстке
in HTML Coding
Posted
Здравствуйте, я новичок в сайтостроении и у меня возникла одна проблема при адаптации страницы, она состоит в том ,что в max-width ,при заданной ширине, не хочет работать изменение отступов (padding и margin), хотя flex-direction: column; работает. Жуткое ощущение глупой ошибки ,которую не могу найти. Заранее спасибо за помощь.
Ниже HTML и CSS код:
<header>
<div class="header">
<div class="wrap">
<div class="logo header_left">
<a href="#">
<img src="images/logo.png" alt="Логотип">
</a>
</div>
<div class="header_right">
<div id="topmenu">
<p>
<a href="#">About</a>
<span>/</span>
<a href="#">Blog</a>
<span>/</span>
<a href="#">Contact</a>
<span>/</span>
</p>
</div>
<div id="social">
<a class="twitter" href="#"></a>
<a class="vimeo" href="#"></a>
<a class="facebook" href="#"></a>
<a class="instagram" href="#"></a>
<a class="dribbble" href="#"></a>
<a class="reddit" href="#"></a>
</div>
</div>
</div>
</div>
</header>
——————————————————————————————————————————————————--
#container {
margin: 0 auto;
}
#container .header {
border-bottom: 1px solid #bfbfbf;
box-shadow: 0 0 3px #dbdbdb;
padding-top: 6px;
}
#container .header .wrap {
display: flex;
justify-content: space-between;
padding: 0;
}
@media (max-width: 650px) {
.header .wrap {
flex-direction: column;
padding: 0 3px;
margin-bottom: 5px;
}
.header #socials {
margin-left: 5px;
}
.header #socials a:last-child {
margin-right: 2px;;
}
}
#container .header .header_left {
align-self: center;
}
#container .header .header_right {
display: flex;
justify-content: space-between;
}
#container #topmenu {
color: #8e8e8e;
padding-top: 6px;
}
#container #topmenu a {
color: #8e8e8e;
text-decoration: none;
}
#container #topmenu a:hover {
color: #dd5555;
}
#container #social {
display: flex;
margin-left: 20px;
margin-right: 50px;
}
#social a {
margin-top: 9px;
margin: 8px 10px;
}
.twitter {
background: url("../images/twitter_un.png") no-repeat;
height: 11px;
width: 13px;
cursor: pointer;
}
.twitter:hover {
background: url("../images/twitter.png") no-repeat;
height: 11px;
width: 13px;
}
.dribbble {
background: url("../images/dribbble_un.png") no-repeat;
height: 13px;
width: 13px;
cursor: pointer;
}
.dribbble:hover {
background: url("../images/dribbble.png") no-repeat;
height: 13px;
width: 13px;
}
.vimeo {
background: url("../images/vimeo_un.png") no-repeat;
height: 12px;
width: 13px;
cursor: pointer;
}
.vimeo:hover {
background: url("../images/vimeo.png") no-repeat;
height: 12px;
width: 13px;
}
.facebook {
background: url("../images/facebook_un.png") no-repeat;
height: 13px;
width: 7px;
cursor: pointer;
}
.facebook:hover {
background: url("../images/facebook.png") no-repeat;
height: 13px;
width: 7px;
}
.instagram {
background: url("../images/instagram_un.png") no-repeat;
height: 12px;
width: 12px;
cursor: pointer;
}
.instagram:hover {
background: url("../images/instagram.png") no-repeat;
height: 12px;
width: 12px;
}
.reddit {
background: url("../images/reddit_un.png") no-repeat;
height: 11px;
width: 13px;
cursor: pointer;
}
.reddit:hover {
background: url("../images/reddit.png") no-repeat;
height: 11px;
width: 13px;
}