Hello there!
I'm having a bit of trouble trying to figure out why the scrolling functionality isn't working on my small web app when it reaches the media breakpoint for mobile devices.
If you'd like to take a look, here's the link to the pen:
https://codepen.io/tiapnn/full/ExVQPzM
Below is the CSS code I'm using:
body {
background-color: darksalmon;
font-family: 'Sigmar One', cursive;
overflow-y: scroll
}
#pomodoro-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 550px;
height: 420px;
border-radius: 10px;
background-color: white;
}
span {
font-size: xx-large;
font-family: 'Montserrat Subrayada', sans-serif;
}
header {
font-size: 45px;
font-weight: bolder;
text-align: center;
}
#tomato {
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTTDnWL8S2wxKpTNnFueFEEURgwq5QuF6jJzWQYbV8YUnVJfh-I&usqp=CAU);
height: 300px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
text-align: center;
}
#timer {
margin: auto;
display: inline-block;
}
i {
font-size: x-large;
text-align: center;
}
.right-div {
margin: auto;
display: inline-block;
text-align: center;
}
#timer-label {
font-family: 'Sigmar One', cursive;
font-size: 40px;
color: white;
}
#time-left {
font-size: 60px;
color: white;
}
.lowerI {
color: white;
font-size: xx-large;
}
@media screen and (max-width: 575px) {
#pomodoro-container {
height: auto;
width: 90%;
top: 10%;
transform: translate(-50%, 0%);
}
.right-div {
padding: 35px;
}
header {
font-size: 40px;
}
}
Any thoughts on how I could make it scroll properly?
Thanks, Mattia
P.S: Just so you know, I've double-checked, and there's definitely no "overflow:hidden" in my CSS...