Почему пробелы появляются в правой части моей веб-страницы случайно, когда я нажимаю на адаптивный режим в моих devtools? - PullRequest
Новая
       9

Почему пробелы появляются в правой части моей веб-страницы случайно, когда я нажимаю на адаптивный режим в моих devtools?

0 голосов
/ 23 мая 2019

Так что иногда, не всегда у меня появляется пробел с правой стороны моей веб-страницы, когда я открываю devtools и переключаюсь в адаптивный режим. Это почему? Там нет элементов торчащие причины, если бы они были, это было бы постоянной проблемой? вот картинка на тот случай, если вы не видите ее, когда поднимаете ее

https://imgur.com/a/4jFybOV

https://jsfiddle.net/yat5ncmk/8/ 

html, body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.header {
	background: url(img/mex-9.jpg);
	width: 100%;
	height: 100vh;
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	display: flex;
}

.nav-wrap {
	flex-basis: 40%;
}

.nav-wrap i {
	color: white;
	font-size: 2rem;
	position: absolute;
	right: -33px;
	top: 0px;
	transition: all .1s ease;
}

.nav-wrap i:hover {
	cursor: pointer;
	transform: scale(1.15);
}

.nav-box {
	margin-left: 50px;
	margin-top: 100px;
	max-width: 70px;
	cursor: pointer;
	position: fixed;
	z-index: 10;
}

.b1, .b2, .b3 {
	width: 70px;
	height: 8.5px;
	border-radius: 5px;
	background-color: #fff;
	margin-bottom: 10px;
	transition: all .15s ease;
}

.b1 {
	background-color: #56ff47;
}

.b3 {
	background-color: #ff4c4c;
}

.ham-open .b1 {
	background-color: #56ff47;
	transform: translateY(100px);
	position: relative;
	z-index: 1;
}

.ham-open .b2 {
	transform: translateY(81.5px);
	width: 110px;
	position: relative;
	left: 60px;
	z-index: 0;
}

.ham-open .b3 {
	background-color: #ff4c4c;
	transform: translateY(63px);
	width: 140px;
	position: relative;
	left: 160px;
	z-index: 2;
}

.menu {
	display: flex;
	border-left: 8px solid #56ff47;
	flex-direction: column;
	background-color: #fff;
	margin-left: -700px;
	width: 292px;
	padding-top: 10px;
	padding-bottom: 10px;
	position: fixed;
	border-radius: 5px;
	top: 225px;
	transition: all .15s;
	z-index: 10;
}

.menu a {
	text-decoration: none;
	color: limegreen;
	font-family: 'Kumar One Outline';
	font-size: 2.3rem;
	text-align: center;
	margin-top: 12px;
	margin-bottom: 12px;
	transition: all .5s ease;
}

a:hover {
	color: #007001;
}

.info-wrap {
	flex-basis: 60%;
}

.info {
	font-family: 'Cedarville Cursive';
	color: white;
	font-weight: bold;
	font-size: 4.5rem;
	text-align: center;
	margin-top: 60px;
}

.logo-wrap {
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.logo-wrap div {
	font-family: 'Staatliches';
	color: white;
	font-size: 13rem;
	font-weight: bold;
	letter-spacing: 10px;
	margin-bottom: -5rem;
	position: relative;
	margin-left: auto;
	margin-right: auto;

}




/*---------------ABOUT---------------*/




.about-section {
	background-color: #17a832;
	width: 100%;
	position: relative;
}

.about-section h1 {
	text-align: center;
	font-size: 4.5rem;
	margin-top: 0;
	margin-bottom: 30px;
	padding-top: 15px;
	color: white;
	font-family: 'Cedarville Cursive';
	font-weight: bold;
}

.about-line {
	width: 350px;
	height: 5px;
	background-color: #ddae1a;
	border-radius: 4px;
	position: absolute;
	top: 120px;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
}

.about-wrap {
	display: flex;
	padding-bottom: 150px;
}

.about-info, .image-slider-wrap {
	flex-basis: 50%;
}

.about-info p {
	color: white;
	font-family: 'Josefin Sans';
	font-size: 2rem;
	margin-left: 100px;
	margin-bottom: 0;
	margin-top: 0;
}

.image-slider {
	width: 75%;
	height: 100%;
	background-image: url(img/fam-1.jpeg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: 13px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	transition: all .1s ease;
}

.image-slider i {
	color: white;
	font-size: 5rem;
	position: absolute;
	top: 50%;
	margin-top: -40px;
	transition: all .1s ease;
	cursor: pointer;
}

#left {
	transform: rotate(-90deg);
	left: -30px;
	max-width: 50px;
}

#right {
	transform: rotate(90deg);
	right: -30px;
}

#left:hover {
	transform: rotate(-90deg) scale(1.3);
}

#right:hover {
	transform: rotate(90deg) scale(1.3);
}

.burrito, .taco, .guac, .nachos, .hot {
	position: absolute;
	transform: rotate(-45deg);
	bottom: -130px;
	right: 200px;
	width: 300px;
	height: 300px;
	z-index: 3;
	background-repeat: none;
}

.hot {
    right: 345px;
    width: 240px;
    height: 240px;
    z-index: 2;
    transform: rotate(0deg);
}

.burrito {
	bottom: -140px;
	right: 180px;
	z-index: 1;
}

.nachos {
	transform: rotate(0deg);
	right: 380px;
	width: 165px;
	height: 165px;
	bottom: -170px;
}

.taco {
	transform: rotate(0deg);
	width: 220px;
	height: 220px;
	bottom: -180px;
	right: 460px;
}

.guac {
	transform: rotate(0deg);
	right: 140px;
	bottom: -180px;
	width: 250px;
	height: 250px;
}

.food-wrap {
	position: relative;
	right: 20px;
}




/*---------------MENU---------------*/




.menu-section {
	background-color: #ddae1a;
	display: flex;
	width: 100%;
	top: -100px;
	position: relative;
	clip-path: polygon(0% 0%, 100% 3%, 100% 100%, 0% 100%);
	/*background-image: linear-gradient(4deg, #edb12f 92%, #17a832 92%, #17a832);*/
}

.menu-section h1 {
	font-size: 9.5rem;
	position: absolute;
	top: 30px;
	left: 230px;
	margin-top: -30px;
	padding-top: 15px;
	color: white;
	font-family: 'Cedarville Cursive';
	font-weight: bold;	
}

.menu-line {
	width: 450px;
	height: 5px;
	background-color: #17a832;
	border-radius: 4px;
	position: absolute;
	top: 220px;
	left: 225px;

}

.column-left, .column-right, .column-middle {
	flex-basis: 33.33%;
	margin-top: 230px;
	padding-bottom: 120px;
}

.column-left {
	display: flex;
	justify-content: flex-end;
}

.column-left #combo-platter:after {
	display: block;
	content: "beans and rice included";
	color: white;
	font-size: 1.5rem;
	font-family: 'Josefin Sans';
	margin-top: -25px;
}

.column-left h2:not(#combo-platter):after, .column-middle h2:after, .column-right h2:after {
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	background-color: white;
	border-radius: 3px;
	margin-top: -25px;
}

.column-middle {
	display: flex;
	justify-content: center;
}

.column-right {
	display: flex;
	justify-content: flex-start;
}

.column {
	min-width: 420px;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
}

.column h2 {
	display: inline-block;
	align-self: center;
	font-family: 'Cedarville Cursive';
	color: #17a832;
	font-size: 3rem;
}

.row {
	font-family: 'Josefin Sans';
	font-size: 1.5rem;
}

.row div {
	display: flex;
	justify-content: space-between;
}

.row div:after {
	display: inline-block;
	position: absolute;
	content: "";
	width: 100%;
	margin-top: 33px;
	border-top: 4px dotted black;
}

.row div p {
	background: #ddae1a;
	overflow: hidden;
	position: relative;
	z-index: 1;
	padding: 0 6px; 
}

.menu-h2 {
	text-align: center;
}

.design-left, .design-right {
	position: absolute;
}

.design-right {
	right: 0;
	transform: rotate(180deg);
}

.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent; 
    border-left: 60px solid green;
 	position: relative;
 	top: -10px;
}

.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;  
  border-right:60px solid limegreen;
  position: relative;
  top: 20px; 
}

.arrow-top {
    width: 0; 
    height: 0; 
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent; 
    border-left: 60px solid #20a04b;
 	position: relative;
 	top: -100px;
 	left: 60px;
}

.top-middle {
	position: relative;
	top: -110px;
}

.bottom-middle .arrow-left {
	top: -40px;
}

.bottom-middle .move {
	top: -70px;
}

.bottom {
	position: relative;
	top: -48px;
}

.bottom .arrow-left {
	top: -40px;
}




/*---------------HOURS---------------*/




.hours-section {
	background-color: #17a832;
	margin-top: -155px;
	clip-path: polygon(0% 5%, 4.8% 0%, 95% 0%, 100% 4.8%, 100% 100%, 0% 100%);
	position: relative;
}

.hours-section h1 {
	text-align: center;
	font-size: 5rem;
	margin-top: 0;
	margin-bottom: 30px;
	padding-top: 15px;
	color: white;
	font-family: 'Cedarville Cursive';
	font-weight: bold;
}

.hours-line-left {
	width: 40%;
	height: 10px;
	border-radius: 4px;
	background-color: #ff4c4c;
	position: absolute;
	top: 10%;
	left: 50px;
}

.hours-line-right {
	width: 40%;
	height: 10px;
	border-radius: 4px;
	background-color: #56ff47;
	position: absolute;
	top: 10%;
	right: 50px;
}

.hours-wrap {
	display: flex;
	justify-content: center;
	padding-bottom: 100px;
}

.hours {
	display: flex;
	border: 7px solid green;
	padding: 25px;
}

.hours div div {
	background-color: white;
	color: black;
	margin-bottom: 20px;
	padding: 8px;
	font-size: 3rem;
	font-family: 'Josefin Sans';
	border-right: 10px solid #56ff47;
}

.hours div div:last-child {
	margin-bottom: 0;
}

.hours p {
	margin: 0;
	text-align: center;
}

.hours-open div {
	margin-left: 30px;
}

.hours .hours-open p {
	padding: 0 5px;
}

.design-wrap-left-side {
	position: absolute;
	left: 0;
	top: 29.8%;
}

.hex-left, .hex-right {
	-webkit-clip-path: polygon(47% 5%, 87% 24%, 87% 76%, 47% 95%, 10% 76%, 10% 24%);
	width: 165px;
	height: 165px;
	background-color: limegreen;
	top: 152px;
	left: -16.5px;
	position: absolute;
}

.hex-right {
	top: 152px;
	right: -16.5px;
}

.hex-inner {
	-webkit-clip-path: polygon(47% 5%, 87% 24%, 87% 76%, 47% 95%, 10% 76%, 10% 24%);
	width: 135px;
	height: 135px;
	background-color: #17a832;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto; 
}

.hex-arrow-left, .hex-arrow-right {
    width: 0; 
    height: 0; 
    border-top: 35px solid transparent;
    border-bottom: 35px solid transparent; 
    border-left: 70px solid limegreen;
 	position: absolute;
 	top: 200px;
 	right: -150px;
}

.design-wrap-right-side {
	transform: rotate(180deg);
	position: absolute;
	right: 0;
	bottom: 19.4%;
}

.hours-wrap .design-wrap-left {
	transform: rotate(180deg);
	position: relative;
	top: -80px;
}

.hours-wrap .design-wrap-right {
	position: relative;
	top: 80px;
}

.design-wrap-left .arrow-top, 
.design-wrap-right .arrow-top, 
.design-wrap-left-side .arrow-top,
.design-wrap-right-side .arrow-top {
	width: 0; 
    height: 0; 
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent; 
    border-left: 60px solid limegreen;
 	position: relative;
 	top: -100px;
 	left: 60px;
}

.change-color {
    width: 0; 
    height: 0; 
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent; 
    border-left: 60px solid #6acc66;
 	position: absolute;
 	top: -10px;
}




/*---------------FOOTER---------------*/




.contact-section-background {
	background-color: #666;
	height: 300px;
	clip-path: polygon(0% 0%, 10% 30%, 90% 30%, 100% 0%, 100% 100%, 0% 100%);
	margin-top: -100px;
}

.contact-section {
	display: flex;
	background-color: #595959;
	margin-top: -225px;
	position: relative;
	padding-bottom: 18px;
	z-index: 1;
}

.contact, .location {
	flex-basis: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.contact h1, .location h1 {
	margin: 0;
	font-family: 'Cedarville Cursive';
	color: white;
	font-size: 7rem;
}

.hex {
	-webkit-clip-path: polygon(25% 60%, 75% 60%, 100% 100%, 0% 100%);
	background-color: #17a832;
	transform: rotate(180deg);
	width: 300px;
	height: 150px;
	margin: 0 auto;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 2;
}

.rhombus {
	-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	background-color: #17a832;
	width: 80px;
	height: 80px;
	position: absolute;
	margin: 0 auto;
	top: 60px;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 2;
}

.back-to-top {
	color: #595959;
	font-size: 2.5rem;
	left: -45px;
	position: relative;
	transform: rotate(180deg);
	top: 110px;
	font-family: 'Josefin Sans';
}

.btp-arrow {
	color: #595959;
	font-size: 3rem;
	position: absolute;
	left: 50%;
	margin-left: -24px;
	bottom: 35px;
	transition: all .2s ease;
}

.btp-arrow:hover {
	color: #ddae1a;
	cursor: pointer;
	transform: scale(1.1);
}

.contact p {
	font-family: 'Josefin Sans';
	font-size: 2rem;
	margin-top: 0;
	margin-bottom: 10px;
	color: white;
}

.textarea {
	position: relative;
	min-width: 500px;
}

.contact textarea {
	resize: none;
	width: 100%;
	color: #595959;
	margin: 10px;
	min-height: 150px;
	font-family: 'Josefin Sans';
	font-size: 1.5rem;
	padding: 5px;
	outline: none;
	border: none;
	background: #474646;
	border-radius: 4px;
}

.contact button {
	font-size: 1.5rem;
	font-family: 'Josefin Sans';
	background: darkgrey;
	color: #595959;
	padding: 4px;
	padding-right: 6px;
	padding-left: 6px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	position: absolute;
	bottom: 10px;
	right: -20px;
	transition: all .4s ease;
}

.contact button:hover {
	color: #ddae1a;
}

.contact-line {
	margin-top: 170px;
	margin-bottom: 30px;
	width: 5px;
	border-radius: 3px;
	height: 350px;
	background: #ddae1a;
	position: relative;
}

.links {
	display: flex;
	position: relative;
	max-width: 400px;
	top: -5px;
	left: 7px;
}

.links i {
	font-size: 2.5rem;
	margin-right: 15px;
}

.links p {
	font-size: 1.5rem;
	margin-right: 30px;
	margin-top: 8px;
}

#facebook {
	color: #3b64ed;
	cursor: pointer;
}

#twitter {
	color: #5effeb;
	cursor: pointer;
}

#yelp {
	color: red;
	cursor: pointer;
}

.contact-design-wrap-left {
	position: absolute;
	left: 0;
	top: 40px;
	max-height: 500px;
}

.contact-design-wrap-right {
	position: absolute;
	bottom: 55px;
	right: 0;
	transform: rotate(180deg);
}

.contact-design-wrap-left .bottom {
	height: 0;
}

#align {
	position: absolute; 
	left: 70px; 
	top: -15px;
}

#align2 {
	position: absolute; 
	left: 68px; 
	top: -5px;
}

.grey {
	border-left: 60px solid #666;
}

.light-grey {
	border-right: 60px solid #848484;
}

.same {
	border-left: 60px solid #848484;
}

.lighter {
	border-right: 60px solid #a8a3a3;
}

.map {
	position: relative;
	top: 50px;
}

.map i {
	position: absolute;
	color: #ddae1a;
	font-size: 4rem;
	left: 50%;
	margin-left: -24px;

}

.location .map .street-1 {
	width: 300px;
	position: relative;
	top: 80px;
	height: 15px;
	transform: rotate(90deg);
	background-color: #848484;
	border-radius: 5px;
}

.location .map .street-2 {
	width: 300px;
	height: 15px;
	position: relative;
	top: 65px;
	left: 300px;
	transform: rotate(90deg);
	background-color: #848484;
	border-radius: 5px;
}

.location .map .street-3 {
	margin-top: 40px;
    width: 190%;
    position: relative;
    top: 30px;
    left: -140px;
    height: 18px;
    background-color: #848484;
    border-radius: 8px;
}

.street-info {
	color: white;
	position: absolute;
	font-family: 'Josefin Sans';
	font-size: 1.2rem;
	left: 20px;
	padding-top: 3px;
}

.address {
	position: absolute;
	left: 50%;
	top: 75px;
	margin-left: -68.5px;
	color: #ddae1a;
	text-decoration: none;
	font-family: 'Josefin Sans';
	font-size: 1.2rem;
	text-align: center;
}

.address:hover {
	color: #ddae1a;
	text-decoration: underline;
}

.copyright {
	position: absolute;
	bottom: 0;
	left: 50%;
	font-family: 'Josefin Sans';
	color: #a8a3a3;
	font-size: 1.8rem;
	padding-bottom: 5px;
	margin: 0 0 0 -253.89px;

}




/*---------------MEDIA QUERIES---------------*/


/*----HEADER-SECTION----*/


@media screen and (max-width: 1700px) {
	.logo-wrap div {
		font-size: 12rem;
		margin-bottom: -4rem;
	}

	.info {
	    font-size: 4.3rem;
	    margin-top: 60px;
	}
}

/*----ABOUT-SECTION----*/


@media screen and (max-width: 1700px) {
	.about-info p {
		font-size: 1.8rem
	}
}

/*----MENU-SECTION----*/


@media screen and (max-width: 1700px) {
	.arrow-right {
	    width: 0; 
	    height: 0; 
	    border-top: 25px solid transparent;
	    border-bottom: 25px solid transparent; 
	    border-left: 50px solid green;
	 	position: relative;
	 	top: -5px;
	}

	.arrow-left {
	  width: 0; 
	  height: 0; 
	  border-top: 25px solid transparent;
	  border-bottom: 25px solid transparent;  
	  border-right:50px solid limegreen;
	  position: relative;
	  top: 20px; 
	}

	.arrow-top {
	    width: 0; 
	    height: 0; 
	    border-top: 25px solid transparent;
	    border-bottom: 25px solid transparent; 
	    border-left: 50px solid #20a04b;
	 	position: relative;
	 	top: -80px;
	 	left: 50px;
	}

	.top-middle {
		top: -90px;
	}

	.bottom-middle .arrow-left {
	top: -30px;
	}

	.bottom-middle .move {
		top: -55px;
	}

	.bottom {
		position: relative;
		top: -40px;
	}

	.bottom .arrow-left {
		top: -30px;
	}

	.menu-section h1 {
		font-size: 9rem;
	}

	.menu-line {
		width: 410px;
		top: 215px;
	}

	.column h2 {
		font-size: 2.8rem;
	}
}

/*----HOURS-SECTION----*/


@media screen and (max-width: 1750px) {
	.hours-line-left, .hours-line-right {
		width: 37%;
	}
}

@media screen and (max-width: 1700px) {

	.hours-section h1 {
		margin-bottom: 0;
	}

	.hours {
		padding: 20px;
	}

	.hours div div {
		font-size: 2.7rem;
	}

	.change-color {
	    width: 0;
	    height: 0;
	    border-top: 25px solid transparent;
	    border-bottom: 25px solid transparent;
	    border-left: 50px solid #6acc66;
	    position: absolute;
	    top: -5px;
	}

	.design-wrap-left .arrow-top,
	.design-wrap-left-side .arrow-top,
	.design-wrap-right .arrow-top,
	.design-wrap-right-side .arrow-top {
	    border-top: 25px solid transparent;
	    border-bottom: 25px solid transparent;
	    border-left: 50px solid limegreen;
	    top: -80px;
	    left: 50px;
	}

	.hours-wrap .design-wrap-left {
	    top: -95px;
	}

	.hours-wrap .design-wrap-right {
	    position: relative;
	    top: 95px;
	}

	.hex-left, .hex-right {
	    -webkit-clip-path: polygon(47% 5%, 87% 24%, 87% 76%, 47% 95%, 10% 76%, 10% 24%);
	    width: 137px;
	    height: 136px;
	    background-color: limegreen;
	    top: 132px;
	    left: -13px;
	    position: absolute;
	}

	.hex-inner {
	    -webkit-clip-path: polygon(47% 5%, 87% 24%, 87% 76%, 47% 95%, 10% 76%, 10% 24%);
	    width: 110px;
	    height: 110px;
	    background-color: #17a832;
	    position: absolute;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    top: 0;
	    margin: auto;
	}

	.hex-arrow-left, .hex-arrow-right {
	    width: 0;
	    height: 0;
	    border-top: 30px solid transparent;
	    border-bottom: 30px solid transparent;
	    border-left: 65px solid limegreen;
	    position: absolute;
	    top: 171px;
	    right: -131px;
	}
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...