After exhausting all my options and searching high and low for a solution, I am completely stuck. Despite trying various methods like importing media queries from a separate file and using ancestors to target elements, I still cannot get this to work.
The current issue involves a span with nested spans that should only display when the page width falls between 0px and 600px. In my React project, I had to adhere to their guidelines for inline styling. To achieve this, I created an object with the necessary styling set to display: none as a key-value pair. This object was then passed to the JSX code for the span element, resulting in the following structure:
const hidden = {
display: 'none'
}
...
<span className="blah" style={hidden}>
<span>blah</span>
<span>: </span>
{deleteButton2} //this is a separate span generated conditionally, unrelated to this issue.
</span>
Within my media query, I have:
@media screen and (min-width: 0px) and (max-width: 600px) {
//other rules that are functioning correctly
...
.blah-ancestor > .blah {
display: inline //I've tried different display values without success.
}
}
I'm struggling with this problem and could really use some assistance. It's been a frustrating experience, and I feel ill-equipped to handle such a complex bug since I haven't encountered something quite like this before.