htmlcsscss-gridopera

Lines or borders that I don't know how to remove

I made a display:grid; with grid-areas, then there is a border or idk what kind of line that is and I can't remove, it seems like a bad detail.

I try to remove it removing box-shadow, and all the borders, but it is still there, it's making me crazy... I just need to remove those lines that are like white or some kind of grey color. Here is my code. I'm doing it in 315px min-width looking for a good look for cellphone users.

Image of the problem:
Here's what I'm talking about

* {
  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;
  }
}
<script src="https://kit.fontawesome.com/2c2f9cb66d.js" crossorigin="anonymous"></script>
<div class="div__grid-main">

  <div class="div__1">
    <p class="div__1-p-plants">Plants Make People Happy*</p>
  </div>

  <div class="div__2">
    <p class="div__2-p-tiltle-1">The Sill</p>
  </div>

  <div class="div__x">
    <ul>
      <li class="div__2-li icono-1"><i class="fa-solid fa-leaf"></i><a class="div__2-a div__2-a-1" href="">Resources</a></li>
      <li class="div__2-li li__padre-visit"><a class="div__2-a a-skill" href="">Visit The Sill</a></li>
      <li class="div__2-li"><a class="div__2-a a-hello" href="">Hello, Sing In</a></li>
      <li class="div__2-li icono-2"><i class="fa-solid fa-magnifying-glass"></i></li>
    </ul>
    <ul>
      <!-- <i class="fa-duotone fa-leaf"></i> -->
    </ul>
  </div>

  <div class="div__3">
    <a href="">Inicio</a>
    <a href="">Productos</a>
    <a href="">Otros</a>
    <a href="">¿Por qué nosotros?</a>
    <a href="">Contactanos</a>
    <a href="">Inicio</a>
    <a href="">Inicio</a>
    <a href="">Inicio</a>
  </div>

  <div class="div__4">
    <p class="div__4-p-titulo-responsive">Your Summer Sill</p>
    <div class="div__4-div-p">
      <p class="div__4-p-titulo">Your Summer Sill</p>

      <a href="" class="btn">Shop Now</a>
    </div>
    <div class="div__4-div-img">
      <img class="div__4-img-plants3" src="/Plantas 3.jpg" alt="Plants">
    </div>
  </div>

  <div class="div__6">
    <img class="div__6-img-plants3" src="/Plantas 3.jpg" alt="Plants">
  </div>

  <div class="div__5"></div>


</div>

Solution

  • The issue is not present in Firefox, Chrome or Edge and seems to be isolated to Opera.

    This rendering issue usually happens when the page is not zoomed to 100%.

    You can reset the zoom using ctrl + 0 on windows, and command + 0 on Mac.

    In Opera specifically you can reset zoom from:

    tools / preferences / webpages / images and zoom settings for new tabs / Page Zoom / 100%

    or open url opera:config#UserPrefs|Scale