!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.