I am currently facing a design challenge with a website component that appears as one solid inline block. While it looks okay on a normal-sized screen, things start to look strange when the screen size decreases. I have attempted using a media query to adjust some of the CSS properties in order to align all the divs vertically, but so far, this solution has not been effective.
Additionally, there is an extra 10px at the bottom of this block that I have tried to eliminate through various methods, without success. Oddly enough, it only disappears if I set a fixed height of 300px on the larger outer div. Currently, I am attempting to use the calc function to resolve this issue, but I haven't had any luck with that either. If anyone knows how to fix this problem, I would greatly appreciate your assistance.
Below is the current media query being utilized:
@media (max-width: 500px){
#orange-block-right, #orange-picture{
float: left;
display: inline;
}}
If you'd like to see the issue firsthand, please refer to the following jsfiddle link. Any insights on what might be causing the problem would be incredibly helpful to me.