Jump to content

Masya

Neophyte
  • Posts

    2
  • Joined

  • Last visited

Information

  • Sex
    мужской
  • From
    Ростов-на-Дону

Masya's Achievements

Explorer

Explorer (1/14)

0

Reputation

  1. Здравствуйте, я новичок в сайтостроении и у меня возникла одна проблема при адаптации страницы, она состоит в том ,что в 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; }
  2. Здравствуйте, я новичок в сайтостроении и у меня возникла одна проблема при адаптации страницы, она состоит в том ,что в 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; }
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy