This is the beginning of my porodoro timer project here https://codepen.io/BLBaylis/pen/Oxpdye?editors=1100.
I’m trying to make the project responsive and so want to change the two divs containing the buttons and their associated times from .col-3 to .col-xs-4 and col-sm-3. This should mean they are 4 columns when on an xs screen and 3 on all others if my understanding is correct. However, they instead take up a full row when I add the .col-sm-3.
The ids of the two divs I’m trying to change are #time-length and #break-length. I will presumably change the sizes of the any sub-columns too, but I have not yet made it that far.
If anyone can show me the cause of this it would be greatly appreciated as this is giving me a headache.