I am still fairly new to web programming and just starting out with bootstrap.
After creating a section of my page that worked well on larger screens, I realized it wasn't responsive enough on smaller devices. The height was set at 400px, causing horizontal squishing on phones. To address this, I tried wrapping half of the content to the bottom, but it created other layout issues. I decided that setting the height to 800px for smaller screens would be a solution.
My search led me to media queries as a potential fix for this problem.
Initially, I had the following code where the height is fixed at 400px:
.addon {height:400px;}
While this worked fine for screens equal to or larger than 'md', it didn't provide the desired responsiveness for smaller screens.
This is my attempt at solving the issue:
@media (min-width: @screen-md-min)
{
.addon {height:400px;}
}
@media (max-width: @screen-sm-max)
{
.addon {height:800px}
}
Unfortunately, this code doesn't seem to have any effect regardless of the screen size. Despite researching and double-checking my approach, I'm unable to figure out why it's not working as expected.
If anyone can offer some guidance or point out what mistakes I may be making, I would greatly appreciate it.