I'm experimenting with the text column property to make my content more user-friendly. However, I've encountered an issue where I want the columns to disappear when the screen size is reduced to a certain width, like 50px in this example. I attempted to set the column count to 0 within a media query for the minimum screen width, hoping it would convert the columns into a standard paragraph format. Strangely, this solution works outside of the media query but not inside. I also tried adding default text, but it didn't resolve the problem.
Below are my HTML, CSS, and CodePen link. Any assistance is greatly appreciated.
CodePen Link: https://codepen.io/alexbicycle/details/ExyzdEG
HTML:
<section class="section-intro" id="skills-part-of-page">
<h2 class="section-intro-title">SKILLS</h2>
<div class="section-text-columns-container">
<p class="text-columns">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</section>
CSS:
.section-text-columns-container{
width: 50%;
margin-left: 21vw;
position: relative;
bottom: 15vh;
}
.text-columns{
/*To split text & have side by side*/
column-count: 2;
-webkit-column-count: 2;
column-gap: 5vh;
-webkit-column-gap: 4vh;
text-align: left;
}
@media screen and (min-width: 50px){
.section-text-columns-container{
width: 50%;
margin-left: 10vw;
background-color: grey;
}
.text-columns{
column-count: 0;
-webkit-column-count: 0;
display: inline-block;
padding: 1%;
word-break: initial;
}
}