1
목적
- 이 경우에도, 부모에 포함 된
header__info을 유지 부모 헤더 안에 포함 된 유지하지 않는 페이지 변경하거나 브라우저 윈도우의 크기가 변경되는 경우
방향 문제
부모 헤더가 있으며 그 위에 아이디 div .header__info이 있습니다. 여기에는 연도, 제목, 설명 및 몇 개의 버튼과 같은 프로젝트 정보가 들어 있습니다. 브라우저에서 최대 125 %까지 페이지 크기를 조정하면 header__info은 부모 header 내에 있지 않습니다.하위 요소는
내가 height: 100vh의 사용에서 스위치 헤더의 높이를 고정하고 html, body의 높이와 부모 header 100 %을 시도했지만, 그 중 하나 일을하지 않았다.
/*----------------------------------
VARIABLES
----------------------------------*/
/*----------------------------------
FUNCTIONS
----------------------------------*/
/*----------------------------------
MIXINS
----------------------------------*/
/*----------------------------------
PLACEHOLDERS
----------------------------------*/
/*----------------------------------
TYPOGRAPHY
----------------------------------*/
/*----------------------------------
FONTS & WEIGHTS
----------------------------------*/
/*----------------------------------
COLORS
----------------------------------*/
/*----------------------------------
SHADES OF GREY
----------------------------------*/
/*----------------------------------
BASE
----------------------------------*/
html {
font-family: "Open Sans";
font-size: 62.5%;
/* 10px browser default */ }
body {
margin: 0; }
h1 {
font-size: 18rem;
font-family: "Oswald";
text-transform: uppercase;
text-align: center;
margin: 0;
line-height: 1.4; }
h2 {
font-weight: 700;
font-size: 1.6rem;
text-align: center;
margin: 0;
text-transform: uppercase; }
h3 {
font-size: 2rem; }
a {
text-decoration: none; }
/* Large devices */
/* Large devices */
/* Medium devices */
/* Medium devices */
/* Small devices */
@media (max-width: 480px) {
h1 {
line-height: 1.1;
margin-top: 30px; } }
/* Small devices */
/*----------------------------------
GRID
----------------------------------*/
/*----------------------------------
BOX SIZING
----------------------------------*/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
/*----------------------------------
CLEARFIX
----------------------------------*/
.clearfix:after {
display: block;
visibility: hidden;
clear: both;
height: 0;
content: " ";
font-size: 0; }
* html .clearfix {
zoom: 1; }
/* IE6 */
*:first-child + html .clearfix {
zoom: 1; }
/* IE7 */
.is-bold {
font-weight: 700; }
.is-grey {
color: #aaa; }
.is-strikethrough {
text-decoration: line-through;
color: #c62828; }
.is-hidden {
opacity: 0; }
/* Large devices */
/* Large devices */
/* Medium devices */
/* Medium devices */
@media (max-width: 640px) {
.is-hidden {
display: none; } }
/* Small devices */
/* Small devices */
/*----------------------------------
HEADER
----------------------------------*/
header {
width: 100vw;
height: 100%;
min-height: 100vh;
position: relative;
background-image: url("/src/img/snowglobe1.jpg");
background-size: cover;
background-position: center;
position: relative; }
.header__info {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%); }
.header__credit {
font-weight: 400;
margin: 0;
position: absolute;
bottom: 0;
right: 0;
color: #fff;
padding: 30px;
padding-right: 45px; }
.header__year {
color: #fff;
font-weight: 700;
font-size: 1.6rem;
text-align: center;
margin: 0;
text-transform: uppercase;
/* display: inline-block; */
width: 120px;
margin: 0 auto;
padding-bottom: 2px;
border-bottom: 4px solid #c62828; }
.header__intro {
color: #fff; }
.header__description {
text-align: center;
color: #aaa;
color: #212121;
color: #fff;
font-size: 1.8rem;
line-height: 1.5;
font-weight: 400;
width: 60%;
margin: 0 auto; }
.header__buttons {
text-align: center;
margin-top: 45px; }
/* Large devices */
@media (max-width: 1200px) {
.header__info {
width: 60%; } }
/* Large devices */
@media (max-width: 1024px) {
.header__info {
width: 75%; } }
/* Medium devices */
@media (max-width: 800px) {
.header__info {
width: 80%; } }
/* Medium devices */
@media (max-width: 768px) {
.header__intro {
line-height: 1.1;
margin-top: 30px;
margin-bottom: 45px; } }
/* Custom query */
@media (max-width: 700px) {
.header__buttons {
margin-left: 25px; } }
/* Medium devices */
@media (max-width: 640px) {
.header__intro {
font-size: 14rem; }
.header__description {
font-size: 1.6rem;
width: 90%; }
.header__credit {
display: none; } }
/* Small devices */
@media (max-width: 480px) {
.header__buttons {
margin-left: 0;
position: relative;
left: 3%; }
.header__description {
width: 100%; } }
/* Small devices */
@media (max-width: 360px) {
.header__buttons {
position: relative;
left: -2%; } }
/* Small devices */
@media (max-width: 340px) {
.header__buttons {
position: relative;
left: -4%; } }
/* Small devices */
@media (max-width: 320px) {
.header__buttons {
position: relative;
left: -6%; } }
/*----------------------------------
FOOTER
----------------------------------*/
/*----------------------------------
SIDEBAR
----------------------------------*/
.sidebar__title {
color: #212121;
font-size: 1.4rem;
font-weight: 900;
font-family: "Roboto";
margin-left: 15px;
margin-bottom: 0;
margin-top: 45px;
text-transform: uppercase;
padding-bottom: 5px;
display: inline-block; }
.sidebar__note {
margin-left: 15px;
width: 200px;
margin-bottom: 30px; }
.sidebar__byline,
.sidebar__caveat {
font-size: 1.4rem; }
.sidebar__editor,
.sidebar__byline {
display: none; }
aside {
background: #f7f7f7;
width: 20vw;
padding-bottom: 45px;
min-width: 250px;
padding-left: 45px; }
.all {
display: flex;
flex-wrap: nowrap;
margin-top: 45px; }
/* Large devices */
/* Large devices */
/* Medium devices */
/* Medium devices */
@media (max-width: 640px) {
aside {
display: none; } }
/* Small devices */
/* Small devices */
.destination__group {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
height: 100%;
margin-bottom: 60px; }
.destination {
border: 1px solid #aaa;
width: 25vw;
margin-right: 30px;
height: 350px;
border-radius: 3px;
margin-bottom: 30px;
position: relative;
background: #ddd;
background-size: cover;
cursor: pointer; }
.destination--ad {
cursor: default; }
.destination--kimmswick {
background-image: url("/src/img/kimmswick.jpg"); }
.destination--stcharles {
background-image: url("/src/img/st-charles.jpg"); }
.destination--chesterfield {
background-image: url("/src/img/chesterfield.jpg"); }
.destination--centralwestend {
background-image: url("/src/img/centralwestend.jpg"); }
.destination--clayton {
background-image: url("/src/img/clayton.jpg"); }
.destination--cherokee {
background-image: url("/src/img/cherokee.jpg"); }
.destination--downtown {
background-image: url("/src/img/downtown.jpg"); }
.destination--maplewood {
background-image: url("/src/img/maplewood.jpg"); }
.destination--edwardsville {
background-image: url("/src/img/edwardsville.jpg"); }
.destination--webster {
background-image: url("/src/img/webster.jpg"); }
.destination--delmarloop {
background-image: url("/src/img/delmarloop.jpg"); }
.destinations__header {
text-align: center;
text-transform: uppercase;
font-weight: 700;
font-size: 1.6rem;
font-family: "Open Sans";
margin-bottom: 30px; }
.destination__info {
position: absolute;
bottom: 0;
left: 0;
padding: 30px; }
.destination__overlay {
background-color: rgba(0, 0, 0, 0.2);
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%; }
.destination__tease {
font-family: "Roboto";
font-size: 1.2rem;
text-transform: uppercase;
margin-bottom: 5px;
color: #fff; }
.tease--explainer {
background: #c62828;
color: #fff;
border: none; }
.tease--explainer p {
font-size: 1.6rem;
text-transform: none; }
.destination__name {
font-family: "Merriweather";
font-size: 3rem;
font-weight: 900;
margin: 0;
color: #fff; }
.destination__tease,
.destination__name {
z-index: 999;
position: relative; }
.destination__buy--item,
.destination__todo--item {
display: block;
text-align: left;
margin-bottom: 15px;
list-style-type: decimal;
font-size: 1.8rem;
line-height: 1.8; }
.destination__buy--item a,
.destination__todo--item a {
text-decoration: none;
color: #999;
border-bottom: 2px solid #999; }
.destination__buy--item a:hover,
.destination__todo--item a:hover {
color: #212121;
border-bottom: 2px solid #212121; }
.destination__buy--item span,
.destination__todo--item span {
color: #c62828; }
.destination__visit,
.destination__things {
font-family: "Merriweather";
font-size: 3rem;
font-weight: 900;
color: #212121;
margin-bottom: 30px;
padding-bottom: 5px;
border-bottom: 1px solid #212121; }
.destination--activities {
width: 50%;
margin: 0 auto; }
.destination__teaser {
font-size: 2rem;
color: #212121;
margin-bottom: 30px; }
.destination__title {
font-family: "Merriweather";
font-size: 5rem;
font-weight: 900;
margin-bottom: 0; }
.destination__thing--title {
font-family: "Roboto";
font-size: 1.6rem;
text-transform: uppercase;
margin-bottom: 15px;
color: #c62828; }
.destination__thing {
margin-bottom: 45px; }
/* Large devices */
@media (max-width: 1200px) {
.destination--activities {
width: 60vw; }
.destination {
width: 28vw;
margin-right: 15px; } }
/* Large devices */
@media (max-width: 1024px) {
.destination {
width: 46vw;
margin: 0 auto;
margin-right: 15px;
margin-bottom: 15px; } }
/* Medium devices */
@media (max-width: 768px) {
.destination--activities {
width: 70vw; } }
/* Medium devices */
@media (max-width: 640px) {
.destination {
width: 90vw;
margin-right: 0;
margin-left: 0; } }
/* Small devices */
@media (max-width: 480px) {
.destination--activities {
width: 85vw; }
.destination__buy--item,
.destination__todo--item {
font-size: 1.6rem;
width: 95%; }
.destination__title {
font-size: 4rem; }
.destination {
width: 85vw; } }
/* Small devices */
/*----------------------------------
ADVERTISEMENT
----------------------------------*/
.advertising {
width: 100%;
margin: 0 auto;
text-align: center;
margin-top: 30px;
margin-bottom: 15px;
position: relative; }
.advertising--horizontal {
height: 100px; }
.advertising--square {
border: none;
background: none; }
.square {
background: #ddd;
margin-right: 30px;
width: 300px;
height: 250px; }
.square--center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); }
/* Large devices */
@media (max-width: 1200px) {
.advertising--square {
width: 70%; } }
/* Large devices */
@media (max-width: 1024px) {
.advertising--square {
width: 100%;
margin: 0 auto;
text-align: center; } }
/* Medium devices */
@media (max-width: 768px) {
.square {
display: block;
margin: 0 auto;
margin-bottom: 30px; } }
/* Medium devices */
/* Small devices */
/* Small devices */
/*----------------------------------
BUTTONS
----------------------------------*/
.button__group {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 75%;
margin-top: 15px;
margin-bottom: 15px;
margin: 0 auto;
padding-left: 30px;
border: 1px solid red; }
.button__controls {
margin-top: 60px;
margin-bottom: 60px; }
button {
display: block;
margin-top: 15px;
margin-bottom: 15px;
padding: 20px;
padding-right: 60px;
padding-left: 60px;
cursor: pointer;
text-align: left;
border: none;
background: #fff; }
.btn--previous,
.btn--next,
.btn--buy,
.btn--all,
.btn--recommend,
.btn--option {
text-transform: uppercase;
border-radius: 3px;
font-family: "Roboto", sans-serif;
font-size: 1.4rem;
font-weight: 700; }
.btn--previous,
.btn--next {
display: inline;
margin-right: 30px;
min-width: 225px;
text-align: center; }
.btn--all,
.btn--recommend,
.btn--option {
border: 1px solid #aaa; }
.btn--previous {
color: #c62828;
border: 1px solid #c62828; }
.btn--previous .fa-long-arrow-left {
color: #c62828; }
.btn--all,
.btn--recommend,
.btn--option {
font-weight: 400;
text-transform: none;
color: #212121;
display: inline-block;
margin-right: 30px;
min-width: 225px;
min-height: 75px;
border-bottom: 2px solid #aaa; }
.btn--all,
.btn--recommend {
background: #c62828;
border: none;
color: #fff;
font-weight: 700;
text-align: center; }
.btn--all:hover,
.btn--recommend:hover {
background: #900;
border: none; }
.btn--option {
text-align: left;
padding-left: 30px;
min-width: 260px;
min-height: 75px;
font-size: 1.6rem; }
.btn--option.is-selected {
border: 2px solid #c62828;
color: #c62828; }
.btn--option .fa-check {
color: #c62828;
float: right;
position: relative;
right: -40px;
top: -1px; }
.btn--option .fa-check.is-grey {
color: #e7e7e7; }
.btn--option .fa-check.is-red {
color: #c62828; }
.btn--sidebar {
font-weight: 400;
text-transform: none;
margin: 0;
font-size: 1.6rem;
padding-left: 15px;
font-family: "Roboto";
background: transparent;
color: #212121;
margin-top: 15px;
padding-top: 5px;
padding-bottom: 5px; }
.btn--sidebar:hover {
color: #aaa;
color: #ccc; }
.btn--next,
.btn--buy {
color: #fff;
border: none;
background: #c62828; }
.btn--buy {
margin: 0;
width: 100%;
text-align: center;
margin-top: 15px;
text-decoration: none; }
.btn--buy:visited {
text-decoration: none; }
.btn--view {
border: none;
margin-bottom: 0; }
.btn--view:hover {
color: #212121; }
.btn--next {
border-bottom: 2px solid #900; }
.btn--next:hover {
background: #900;
transition: 0.2s; }
/* Custom query */
@media (max-width: 1250px) {
.button__group {
width: 80%; } }
/* Large devices */
@media (max-width: 1200px) {
.button__group {
width: 90%; } }
/* Large devices */
@media (max-width: 1024px) {
.button__group {
width: 100%; } }
/* Medium devices */
/* Medium devices */
/* Small devices */
@media (max-width: 480px) {
.btn--option {
min-width: 275px; }
.btn--all,
.btn--recommend {
min-width: 275px; } }
/* Small devices */
/* Small devices */
/*----------------------------------
GIFT
----------------------------------*/
.gifts {
display: flex;
flex-wrap: wrap;
justify-content: left;
width: 80vw;
clear: both;
margin-left: 45px; }
.gift {
width: 500px;
padding: 15px;
border: 1px solid #aaa;
border-radius: 3px;
font-family: "Roboto";
font-size: 1.8rem;
width: 375px;
margin-bottom: 30px;
margin-right: 30px; }
.gift__image {
background: #ddd;
width: 100%;
height: 300px; }
.gift__name,
.gift__price {
font-weight: 700; }
.gift__name {
margin-top: 15px;
margin-bottom: 30px;
font-family: "Merriweather";
font-size: 4rem;
line-height: 1;
font-weight: 900; }
.gift__price {
margin: 0;
margin-right: 30px;
font-size: 2rem;
line-height: 1;
font-family: "Open Sans";
font-weight: 900; }
.gift__description {
margin-bottom: 0;
font-family: "Open Sans";
font-size: 1.6rem;
color: #212121; }
.gift__link {
display: inline-block;
text-decoration: none;
border-bottom: 1px solid #212121; }
.gift__share {
display: block;
clear: both;
padding: 15px;
border: 1px solid #aaa; }
.gift__icons {
text-align: center; }
.gift__link {
margin-bottom: 30px;
border-bottom: 2px solid #c62828; }
.gift__link:visited {
color: #c62828; }
/*----------------------------------
GUIDE
----------------------------------*/
.helper {
height: 15vh; }
.helper p {
font-size: 2rem; }
.option {
cursor: pointer;
border-bottom: 1px dotted #212121;
font-weight: 700; }
/*----------------------------------
ICONS
----------------------------------*/
i.fa-pinterest-p,
i.fa-amazon,
i.fa-twitter,
i.fa-facebook,
i.fa-check,
i.fa-long-arrow-left,
i.fa-times,
i.fa-map-marker,
i.fa-map,
i.fa-envelope,
i.fa-gift {
margin-right: 5px;
font-size: 2rem;
cursor: pointer;
color: #212121; }
i.fa-pinterest-p:visited, i.fa-pinterest-p:focus, i.fa-pinterest-p:active,
i.fa-amazon:visited,
i.fa-amazon:focus,
i.fa-amazon:active,
i.fa-twitter:visited,
i.fa-twitter:focus,
i.fa-twitter:active,
i.fa-facebook:visited,
i.fa-facebook:focus,
i.fa-facebook:active,
i.fa-check:visited,
i.fa-check:focus,
i.fa-check:active,
i.fa-long-arrow-left:visited,
i.fa-long-arrow-left:focus,
i.fa-long-arrow-left:active,
i.fa-times:visited,
i.fa-times:focus,
i.fa-times:active,
i.fa-map-marker:visited,
i.fa-map-marker:focus,
i.fa-map-marker:active,
i.fa-map:visited,
i.fa-map:focus,
i.fa-map:active,
i.fa-envelope:visited,
i.fa-envelope:focus,
i.fa-envelope:active,
i.fa-gift:visited,
i.fa-gift:focus,
i.fa-gift:active {
color: #212121; }
i.fa-pinterest-p:hover,
i.fa-amazon:hover,
i.fa-twitter:hover,
i.fa-facebook:hover,
i.fa-check:hover,
i.fa-long-arrow-left:hover,
i.fa-times:hover,
i.fa-map-marker:hover,
i.fa-map:hover,
i.fa-envelope:hover,
i.fa-gift:hover {
color: #c62828; }
i.fa-times,
i.fa-long-arrow-right,
i.fa-arrow-right {
position: relative;
top: 2px;
margin-left: 8px;
font-size: 2rem; }
i.fa-long-arrow-left {
position: relative;
top: 2px; }
i.fa-pinterest-p,
i.fa-facebook,
i.fa-twitter {
margin-right: 30px; }
i.fa.fa-amazon {
margin-right: 15px; }
i.fa-gift {
margin-right: 8px;
margin-top: 30px; }
i.fa-gift:hover {
color: #212121; }
i.fa-circle {
color: #fff;
margin-right: 5px;
font-size: 8px;
position: relative;
top: -2px;
display: none; }
i.fa-check {
cursor: default; }
/*----------------------------------
LIST
----------------------------------*/
ul {
padding: 0; }
ul li {
display: inline-block;
margin-right: 15px;
text-align: center; }
.panel {
width: 100%;
height: 100%;
position: relative; }
.panel__progress {
display: flex;
flex-wrap: wrap;
justify-content: space-around; }
.panel__circle {
width: 50px;
height: 50px;
margin: 0 auto;
padding: 15px;
border: 1px solid #aaa;
border-radius: 50%;
font-size: 1.6rem;
font-weight: 300; }
.panel__circle.is-selected {
color: #fff;
border: none;
background: #c62828; }
.panel__circle.is-completed {
border: 1px solid #c62828; }
.panel__circle.is-completed .fa-check {
color: #c62828; }
.panel__text {
font-family: "Roboto", sans-serif;
font-size: 1.4rem; }
.panel__number {
position: relative;
top: -22px; }
.panel__number.is-hidden {
display: none; }
.panel__pick {
padding: 15px;
text-align: center; }
.panel__title {
font-family: "Merriweather";
font-weight: 900;
text-transform: none;
margin-top: 30px;
font-size: 4rem; }
.panel__instructions {
text-align: center;
font-weight: 400;
font-family: "Open Sans";
font-size: 1.8rem;
color: #aaa;
margin: 0;
margin-top: 15px;
margin-bottom: 30px; }
/* Large devices */
/* Large devices */
/* Medium devices */
/* Medium devices */
@media (max-width: 640px) {
.panel__circle,
.panel__text {
display: none; }
.panel__title {
font-size: 3rem;
width: 80%;
margin: 0 auto; } }
/* Small devices */
/* Small devices */
/*----------------------------------
MAP
----------------------------------*/
.map {
background: #ddd;
width: 100%;
height: 600px;
max-width: 800px;
max-height: 600px; }
/* Large devices */
/* Large devices */
/* Medium devices */
/* Medium devices */
/* Small devices */
@media (max-width: 480px) {
.map {
height: 400px; } }
/* Small devices */<header>
<div class="header__overlay destination__overlay"></div>
<div class="header__info">
<h2 class="header__year">2016 Edition</h2>
<h1 class="header__intro">The List</h1>
<h3 class="header__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, reiciendis voluptate impedit, dolor tempora ratione debitis repudiandae laborum consectetur aperiam. Ad magnam facere quam optio cumque nihil vero perferendis dolores.</h3>
<div class="header__buttons">
<button class="btn btn--all">See all 200+ gifts</button>
<button class="btn btn--recommend">Get a recommendation</button>
<!-- <button class="btn btn--recommend">Explore a destination</button> -->
</div>
</div>
<p class="header__credit">Photo by tk-name</p>
</header>index.html을
<header>
<div class="header__overlay destination__overlay"></div>
<div class="header__info">
<h2 class="header__year">2016 Edition</h2>
<h1 class="header__intro">The List</h1>
<h3 class="header__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, reiciendis voluptate impedit, dolor tempora ratione debitis repudiandae laborum consectetur aperiam. Ad magnam facere quam optio cumque nihil vero perferendis dolores.</h3>
<div class="header__buttons">
<button class="btn btn--all">See all 200+ gifts</button>
<button class="btn btn--recommend">Get a recommendation</button>
<!-- <button class="btn btn--recommend">Explore a destination</button> -->
</div>
</div>
<p class="header__credit">Photo by tk-name</p>
</header>
header.scss
/*----------------------------------
HEADER
----------------------------------*/
header {
width: 100vw;
height: 100%;
min-height: 100vh;
position: relative;
background-image: url("/src/img/snowglobe1.jpg");
background-size: cover;
background-position: center;
position: relative;
}
.header__info {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
}
.header__credit {
font-weight: 400;
margin: 0;
position: absolute;
bottom: 0;
right: 0;
color: $color-white;
padding: 30px;
padding-right: 45px;
}
.header__year {
color: $color-white;
font-weight: 700;
font-size: 1.6rem;
text-align: center;
margin: 0;
text-transform: uppercase;
/* display: inline-block; */
width: 120px;
margin: 0 auto;
padding-bottom: 2px;
border-bottom: 4px solid #c62828;
}
.header__intro {
color: $color-white;
}
.header__description {
text-align: center;
color: $color-grey-dark;
color: $color-black;
color: $color-white;
font-size: 1.8rem;
line-height: 1.5;
font-weight: 400;
// width: 70%;
width: 60%;
margin: 0 auto;
}
.header__buttons {
text-align: center;
margin-top: 45px;
}
/* Large devices */
@media (max-width: 1200px) {
.header__info {
width: 60%;
}
}
/* Large devices */
@media (max-width: 1024px) {
.header__info {
width: 75%;
}
}
/* Medium devices */
@media (max-width: 800px) {
.header__info {
width: 80%;
}
}
/* Medium devices */
@media (max-width: 768px) {
.header__intro {
line-height: 1.1;
margin-top: 30px;
margin-bottom: 45px;
}
}
/* Custom query */
@media (max-width: 700px) {
.header__buttons {
margin-left: 25px;
}
}
/* Medium devices */
@media (max-width: 640px) {
.header__intro {
font-size: 14rem;
}
.header__description {
font-size: 1.6rem;
width: 90%;
}
.header__credit {
display: none;
}
}
/* Small devices */
@media (max-width: 480px) {
.header__buttons {
margin-left: 0;
position: relative;
left: 3%;
}
.header__description {
width: 100%;
}
}
/* Small devices */
@media (max-width: 360px) {
.header__buttons {
position: relative;
left: -2%;
}
}
/* Small devices */
@media (max-width: 340px) {
.header__buttons {
position: relative;
left: -4%;
}
}
/* Small devices */
@media (max-width: 320px) {
.header__buttons {
position: relative;
left: -6%;
}
}
피들 또는 발췌문을 제공해주세요. –
@ AllDani.com'header.scss'에서 위에 제공된 요소들에 대한 헤더와 스타일을 포함하고있는'index.html' 스 니펫이 있습니다. –
의미 : http://stackoverflow.blog/2014/ 09/introduction-runnable-javascript-css-and-html-code-snippets/ –