Could someone help me unravel this simple issue I seem to be having? My page layout is functioning correctly, but when I apply media breakpoints, nothing changes. Here's an example of my CSS where I am just adjusting the font size in an attempt to make it work, yet the font size remains constant regardless of the browser width.
It's important to note that while the regular Bootstrap responsiveness works fine, my custom media queries don't seem to have any effect.
p {
font-size: 16px;
}
@media (min-width: 576px) {
p {
font-size: 116%;
}
}
@media (min-width: 768px) {
p {
font-size: 108%;
}
}
Another issue I'm facing is with a carousel I added. The media queries only involve setting the height of the carousel. However, similar to the font size problem, the carousel height remains unchanged regardless of the browser width.
#carouselMain {
height: 460px;
}
@media (min-width: 576px) {
#carouselMain {
height: 660px;
}
}
@media (min-width: 768px) {
#carouselMain {
height: 560px;
}
}
I appreciate any help in understanding why this is happening. I've seen similar questions asked before, but the solutions provided didn't seem to solve my specific issue.