How to make two column design responsive using Tailwind CSS

user_16844387 0
Viewed 132

I'm currently working on a responsive layout for my cover letter, and I have stumbled upon a problem regarding responsiveness. Desktop layout looks like this. However, I have opted for hiding the text as well as the progress bar in mobile views, but the margin on chips is not uniform as you can see here.

I'm using this code for the computer skills section, since I figure that I can apply the solution to the section below. However, I will post more code if needed for context.

    <div className="grid grid-rows-4 grid-cols-1 sm:grid-cols-3 items-center justify-center w-full">
      <p className="text-center hidden md:block">Computer Skills</p>
      <div className="flex flex-row gap-2 justify-center col-span-2 items-center">
        <CustomButton text="STUB1" />
        <ProgressBar width="w-full" />
      </div>
      <div className="col-span-1  m-2 sm:m-6" />
      <div className="flex gap-2 justify-center col-span-2 items-center">
        <CustomButton text="STUB2" />
        <ProgressBar width="w-3/4" />
      </div>
      <div className="col-span-1 m-2 sm:m-6" />
      <div className="flex gap-2 justify-center col-span-2 items-center mt-3 sm:mt-0">
        <CustomButton text="STUB3" />
        <ProgressBar width="w-3/4" />
      </div>
      <CustomLine ine isDashed="yes" />
    </div>

Thank you so much for your help in advance.

tailwind-css reactjs css html
1 Answers

try this if there would be, any responsive issue, then make responsive your components, that would be any issue ...!

<div className="grid grid-cols-1 grid sm:grid-cols-12 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-4 items-center justify-center w-full">
  <p className="text-center hidden md:block">Computer Skills</p>
  <div className="flex flex-row gap-2 justify-center col-span-2 items-center">
    <CustomButton text="STUB1" />
    <ProgressBar width="w-full" />
  </div>
  <div className="col-span-1  m-2 sm:m-6" />
  <div className="flex gap-2 justify-center col-span-2 items-center">
    <CustomButton text="STUB2" />
    <ProgressBar width="w-3/4" />
  </div>
  <div className="col-span-1 m-2 sm:m-6" />
  <div className="flex gap-2 justify-center col-span-2 items-center mt-3 sm:mt-0">
    <CustomButton text="STUB3" />
    <ProgressBar width="w-3/4" />
  </div>
  <CustomLine ine isDashed="yes" />
</div>
user_195693840
Related