Home > Software design >  How to fix vw sized divs overlaying
How to fix vw sized divs overlaying

Time:07-11

!Image(https://i.imgur.com/DOaQR24.png)

The Metal straw campaign div keeps overlaying the Food CPR div when the screen reaches a certain size. The text inside both divs are min(40px,5vw) sized) I have tried setting a maximum size but it still happens.

.initiatives=Both the divs .foodcpr & .metalstraw= both the texts in the divs

 .initiatives {
    font-size: min(130px,10vw);
    margin: -1% 5% -1% 5%;
    color: white;
    text-shadow: -0.5px -0.5px 0 black, 0.5px -0.5px 0 black, -0.5px 0.5px 0 black, 0.5px 0.5px 0 black;
  }
  
  
  .foodcpr {
    background-image: url(https://themalaysianreserve.com/wp-content/uploads/2019/09/TMRAMN19091912.jpg);
    background-size: cover;
    background-color: rgba(255, 0, 0, 40%);
    background-blend-mode: multiply;
  }
  
  .metalstraw {
    background-image: url(https://insideretail.asia/wp-content/uploads/2020/09/straw.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

(Sorry for bad English)

CodePudding user response:

Here I changed few things in the CSS hope this helps, making .initiatives as a parent and other two divs as a child, then applying style will work, you can change the style attribute for any size related changes.

.initiatives {   
  position: fixed; /* Stay in place */
  font-size: min(130px,10vw);
  margin: -1% 5% -1% 5%;
  color: white;
  text-shadow: -0.5px -0.5px 0 black, 0.5px -0.5px 0 black, -0.5px 0.5px 0 black, 0.5px 0.5px 0 black;
  }


.initiatives .foodcpr {
   padding-top: 5px;
   display: block;
   background-image: url(https://themalaysianreserve.com/wp-content/uploads/2019/09/TMRAMN19091912.jpg);
   background-size: cover;
   background-color: rgba(255, 0, 0, 40%);
   background-blend-mode: multiply;
   }





.initiatives .metalstraw {
   padding-top: 5px;
   display: block;
   background-image: url(https://insideretail.asia/wp-content/uploads/2020/09/straw.jpg);
   background-size: cover;
   background-position: center;
background-repeat: no-repeat;
}

This is kinda template where you can apply this for the issues you facing.

  • Related