responsive CSS not working since width is set in react logic based on percentage [5:20pm]

[frankcollins3]

attempting to do: set width based on pixels

error: those buttons that also act as a bar graph for remaining water intake have weight dynamically set by percentage

👎 @media only screen (600px) { } ... media queries aren't working seemingly because width is set in logic.

proposed approach: find a way to get width from window.location and perform width setting expressions with limiters that lowered width setting

[frankcollins3]

part of this approach already included: changing div to Container in the hope that bootstrap asserted the needed width-responsive UI adjustment to fit cont

<Container id="Reminder-Cont">

handleClick(index)} style={{ backgroundColor: status[index] === '' ? `#98ddfc${percent}` : status[index] === 'check' ? `#98ddfc${percent}` : '#dedede70', width: `${percent}%`, border: isShown ? "1px dashed #73defe" : "none", borderRadius: '0%', **// width: `${percent}%`,** }} have to change the inline value [5:31pm]

[frankcollins3]

ERROR in src/components/elements/Reminder/Reminder.tsx:33:26
TS2339: Property 'width' does not exist on type 'Window & typeof globalThis'.
    31 |       console.log('window.location')
    32 |       console.log(window.location)
  > 33 |       console.log(window.width().toFixed())
       |                          ^^^^^
    34 |       if (REMINDER_CLICK_COUNT === HYDRO_SCHEDULE.length) {
    35 |         if (!updateFunc) {      
    36 |           (async() => {          

[5:33pm]

[frankcollins3]

👎 console.log($(window).width().toFixed()) [5:33pm]