recipe-pages using css

To make a page responsive, there are many options to choose. It's possible to do so with simple HTML and CSS, but personally, I recommend using Tailwind CSS because it makes it quite simple.

Tailwind manages certain states of your app, and among those are the current viewport size. So you can write code that changes according to the viewport. Let me give you an example.

<div class="md:w-6/12 w-full">
</div>

This is a div that changes its width depending on the screen. The md in the class stands for medium, meaning a screen of a medium size, and the w stands for width. The first class essentially means that when the viewport has a size of medium and up, apply a width to this div of 6/12, meaning around half of the available space.

The second part, w-full, tells the div to take all the space it can, as opposed to the previous class w-6/12 class. You would think that these two declarations would conflict, but because you've specified that you want a width of 6/12 specifically when the screen has a medium size (meaning desktop screens or similar), tailwind will apply the 6/12 width instead. Otherwise, it'll just take the full width, as should be the case with mobile devices.