0

I've been tasked with making an existing website responsive. It's using a bootstrap style grid system and is quite a mess. The following is a snippet of code.

<div class="col-1 col-2 col-3">
  <div class="left">Left Column</div>
</div>

<div class="col-1 col-2 col-3">
  <div class="right">Right Column</div>
</div>

I can add media queries but because the "left" and "right" columns have both been wrapped in these column creating divs, with existing widths applied. What's the best semantic way of rewriting the code (while keeping all the existing column styles), so that I can apply my own styles using media queries?

BoltClock
  • 630,065
  • 150
  • 1,295
  • 1,284
RodeoRamsey
  • 464
  • 1
  • 8
  • 19
  • Thank you for the clarification. I guess I wasn't wrapping my head around it being a parent selector since I was trying to select the child div. I see now that it was! I will try and edit the question and see if I can approach it differently. – RodeoRamsey Nov 17 '18 at 21:09

1 Answers1

0

You can add an id to them

<div id="left" class="col-1 col-2 col-3">
  <div class="left">Left Column</div>
</div

<div id="right" class="col-1 col-2 col-3">
  <div class="right">Right Column</div>
</div>
Rarblack
  • 4,160
  • 4
  • 17
  • 31
  • *and unfortunately editing the HTML is not an option* and :has() will work nowhere – Temani Afif Nov 17 '18 at 21:05
  • I was able to figure out a way to access the HTML to edit it, but I want to make sure I don't completely rewrite it so it breaks elsewhere. – RodeoRamsey Nov 17 '18 at 21:17
  • @Rarblack you need to check the support before advising sometihng, scroll down to the link you shared and see that `:has()` has 0 support – Temani Afif Nov 17 '18 at 21:22