我做了一个显示:网格;带有网格区域,然后有一个边框或 idk 那是什么类型的线,我无法删除,这似乎是一个糟糕的细节。
我尝试删除它,删除框阴影和所有边框,但它仍然存在,这让我发疯......我只需要删除那些像白色或某种灰色的线条。 这是我的代码。我在 315px min-width 中做这件事,为手机用户寻找好看的外观。 “虫子”的照片:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(30deg, rgb(255, 188, 117) , rgb(112, 206, 214));
/* background: purple; */
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
.div__grid-main {
display: grid;
height: 90%;
width: 90%;
/* border: 2px solid none; */
/* border-radius: 10px; */
/* box-shadow: -1px 1px 10px rgba(27, 26, 26, .3); */
/*derecha abajo transparente?*/
grid-template-areas:
"div__1 div__1 div__1"
"div__2 div__x div__x"
"div__3 div__3 div__3"
"div__4 div__4 div__4"
"div__5 div__5 div__5";
grid-template-rows: .3fr .8fr .35fr 4fr .6fr;
}
/* div:first-child {
border: 2px solid none;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
div:last-child {
border: 2px solid none;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
} */
.div__1 {
grid-area: div__1;
background: rgb(52, 135, 92);
}
.div__1-p-plants {
color: #eee;
margin: 10px;
text-align: center;
}
.div__2 {
grid-area: div__2;
/* background: #eee; */
/* border-bottom: solid 1px #dacece; */
/* border-right: solid 1px #eee; */
display: flex;
justify-items: center;
align-items: center;
}
.div__x {
grid-area: div__x;
/* background: #eee; */
/* border-bottom: solid 1px #dacece; */
/* border-left: solid 1px #dacece; */
display: flex;
justify-content: right; /* Horizontal*/
/* align-items: center; */
}
.div__2-li {
display: inline-block;
margin-top: 20px;
}
.icono-1 { /* Acabo de hacer una modificación, esto se llamaba "aaa", supongo que era el ícono-1*/
position: relative;
}
.div__2-a {
margin: 50px;
}
.div__2-a-1 {
margin-left: 10px;
/* height: 40px; */
/* justify-self: center; */
position: relative;
/* display: inline-block; */
}
.fa-leaf {
font-size: 30px;
/* margin: 0; */
position: absolute;
left: -30px;
top: 5px;
}
.div__2-a-1::after {
content: "FAQ, Blog, Support";
position: absolute;
color: #afa6a6;
display: block;
width: 130px;
bottom: 10;
left: 0;
}
.fa-magnifying-glass {
margin-right: 45px;
font-size: 25px;
}
.div__2-p-tiltle-1 {
margin-left: 20px;
/* text-align: left; */
font-size: 30px;
/* background: #ca1d1d; */
width: 100%;
}
.div__2-p-tiltle-1::after {
content: "";
width: 100px;
height: 1px;
background: #000;
display: block;
}
.div__3 {
grid-area: div__3;
/* background: #eee; */
display: flex;
/* justify-content: space-around; */
justify-content: center; /* Horizontal */
align-items: center;
}
a {
color: #000;
text-decoration: none;
margin: 10px;
}
.div__4 {
grid-area: div__4;
background: #bfdbdb;
display: flex;
justify-content: right;
align-items: center;
}
.div__4-p-titulo {
font-size: 50px;
position: relative;
margin-top: 20%;
}
.div__4-p-titulo::after {
content: "Enjoy the feel-good vibes of the season with our easy-care plants and signature planters.";
font-size: 12px;
display: block;
position: absolute;
}
.div__4-img-plants3 {
height: 100%;
width: 100%;
object-fit: cover;
/* display: block;
margin-right: 0;
margin-left: auto; */
}
.div__5 {
grid-area: div__5;
background: #eee;
}
.div__4-div-img {
background: #bfdbdb;
width: 50%;
height: 100%;
}
.div__4-div-p {
background: #bfdbdb;
width: 50%;
height: 100%;
display: flex;
justify-content: center;
/* align-items: normal; */
/* margin-top: 200px; */
position: relative;
}
.btn {
position: absolute;
top: 58%;
left: 19%;
/* box-shadow:inset 0px 1px 0px 0px #289160; */
background-color:#289160;
border:1px solid #289160;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:11px;
font-weight:bold;
padding:8px 14px;
text-decoration:none;
transition-duration: 1s;
}
.btn:hover {
background-color:#2f4723;
}
.div__6 {
display: none;
}
.div__4-p-titulo-responsive {
display: none;
}
@media only screen and (min-width: 315px) {
:root {
--col-fondo-blanco: #eee;
--col-fondo-transparent: rgb(35, 31, 141);
--col-borde-gris: #dacece;
}
.div__grid-main {
display: grid;
height: 90%;
width: 90%;
/* border: 2px solid none; */
/* border-radius: 10px; */
/* box-shadow: -1px 1px 10px rgba(27, 26, 26, .3); */
/* background: #000; */
/* box-shadow: none; */
/*derecha abajo transparente?*/
grid-template-areas:
"div__1 div__1 div__1"
"div__2 div__x div__x"
"div__3 div__3 div__3"
"div__4 div__4 div__4" /* Donde está el título */
"div__6 div__6 div__6" /* Donde irá la imagen */
"div__6 div__6 div__6"
"div__6 div__6 div__6"
"div__5 div__5 div__5"; /* Sección en color blanco */
grid-template-rows: .3fr 1.5fr .35fr 4fr 2fr 2fr 2fr .6fr;
/* .3fr .8fr .35fr 4fr 6fr .6fr */
}
/* div {
background: blue;
} */
.div__2 {
background-color: var(--col-fondo-transparent);
/* border-bottom: solid 1px var(--col-borde-gris); */
/* border-right: solid 0px none; */
}
.div__x {
grid-area: div__x;
background-color: var(--col-fondo-transparent);
/* border-bottom: solid 1px var(--col-borde-gris); */
/* border-left: solid 0px none; */
display: flex;
justify-content: right; /* Horizontal*/
/* align-items: center; */
}
.div__3 {
background-color: var(--col-fondo-transparent);
/* border-top: solid 1px none; */
}
.li__padre-visit { /* Acá estoy controlando al li padre del "Visit" */
/* display: flex; */
/* justify-content: center; */
/* align-items: center; */
}
.div__2-p-tiltle-1::after {
content: "";
width: 100px;
height: 1px;
background: #000;
display: block;
}
.div__4-div-img {
display: none;
}
.div__4 {
grid-area: div__4;
background: #bfdbdb;
display: flex;
justify-content: center;
align-items: center;
}
.div__4-div-p {
display: none;
/* background: #bfdbdb;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative; */
}
.div__4-p-titulo-responsive {
display: block;
font-size: 40px;
/* position: relative; */
/* margin-top: 20%; */
/* padding: 200px; */
}
.div__4-p-titulo-responsive::after {
content: "Enjoy the feel-good vibes of the season with our easy-care plants and signature planters.";
font-size: 12px;
display: block;
position: absolute;
}
.div__6 {
display: block;
grid-area: div__6;
background: #bfdbdb;
width: 100%;
height: 100%;
}
.div__6-img-plants3 {
display: block;
/* display: none; */
height: 100%;
width: 100%;
object-fit: cover;
/* padding: 1px; */
}
.icono-1{
display: none;
}
.icono-2 {
display: none;
}
.a-hello {
display: none;
}
.div__2-a-1::after {
display: none;
}
}