I am facing a challenge with the HTML code below where an automated software inserts the initial CSS style g2f0
<div class="linelevel row">
<div class="g2f0 col-sm-6 form-group">
<label for="name">Name</label>
<input id="name" type="text" value="" name="name">
</div>
<div class="g2f1 col-sm-6 form-group">
<label for="address">Address</label>
<input id="address" type="text" value="" name="address">
</div>
</div>
The software generates incremental styles as the first class automatically added to each div based on the number of divs present:
div.g2f0 {
float: left;
width: 50%;
}
div.g2f1 {
float: left;
width: 50%;
}
I aim to remove the width property from these autogenerated classes in order to utilize Bootstrap grid classes. I attempted to achieve this using specificity, but it interfered with the responsiveness at breakpoints:
<div class="linelevel row">
<div class="g2f0 reset-width col-sm-6 form-group">
<label for="name">Name</label>
<input id="name" type="text" value="" name="name">
</div>
</div>
.linelevel .reset-width {
width: auto;
}
To resolve this issue, I had to make adjustments that affect all grid classes at different breakpoints:
@media (max-width: 768px) {
.col-sm-6 {
width: 100% !important;
}
}
Is there an alternative method that allows me to eliminate the width from the g2f0 class and use a single class between g2f0 and col-sm-6?