Tailwind (version 2) Experiencing Unresponsive Width Changes

I am currently working on fitting a series of elements into a panel, organizing them in rows of three. Here is how I have it set up:

https://i.sstatic.net/DSd7v.png

These elements are supposed to adjust their size based on the screen width. Even though the parent element has a class of flex and the child elements have classes of flex-grow, they are not resizing according to the screen width and I can't seem to figure out why. Below is my code snippet:

   <React.Fragment>
       <div className="flex">
           <className="flex flex-grow items-center justify-center w-20 h-8 mx-1 rounded-md border border-black-16 font-medium"/>
           <className="flex flex-grow items-center justify-center w-20 h-8 mx-1 rounded-md border border-black-16 font-medium"/>
           <className="flex flex-grow items-center justify-center w-20 h-8 mx-1 rounded-md border border-black-16 font-medium"/>
       </div>
   </React.Fragment>
htmlcssreactjstailwind-css

Answer №1

Utilize width-full in the root element or width-8/12 if full width is not desired, as it will adjust according to screen size

I have provided two examples using flex and grid layouts, which may be helpful for you to understand better.

If you want to experiment, you can also check out this resource on tailwind play

<script src="https://cdn.tailwindcss.com"></script>

<h2 class="font-semibold mx-auto w-full text-center p-3 capitalize border-b">with flex</h2>
<div class="w-full mx-auto flex flex-wrap text-center">
    <div class="each-wrap w-4/12">
        <div class="each m-4 p-3 rounded-md border hover:bg-gray-200 cursor-pointer shadow-md border-gray-300">each</div>
    </div>
    <div class="each-wrap w-4/12">
        <div class="each m-4 p-3 rounded-md border hover:bg-gray-200 cursor-pointer shadow-md border-gray-300">each</div>
    </div>
    <div class="each-wrap w-4/12">
        <div class="each m-4 p-3 rounded-md border hover:bg-gray-200 cursor-pointer shadow-md border-gray-300">each</div>
    </div>
    ...
    
</div>


<h2 class="font-semibold mx-auto w-full text-center p-3 capitalize border-b">with grid</h2>
<div class="grid grid-cols-3 text-center">
    <div class="each cursor-pointer hover:bg-gray-200 border p-3 rounded-md border-gray-300 shadow-md m-5">each</div>
    <div class="each cursor-pointer hover:bg-gray-200 border p-3 rounded-md border-gray-300 shadow-md m-5">each</div>
    <div class="each cursor-pointer hover-bg-gray-200 border p-3 rounded-md border-gray-300 shadow-md m-5">each</div>
    ...
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Exploring the world of jQuery and the array data structure

I'm attempting to target and access all inputs with the specified class: validate['number'] However, in some cases, the classes may appear as follows: validate['required', 'number'] My goal is to identify all elements ...

jqueryhtmldocument-ready

Styling the body element in Material UI: A guide to customizing the

I'm having trouble figuring out how to target the root elements using the ThemeProvider in Material UI. const theme = createMuiTheme({ palette: { background: { default: "#00000", backgroundColor : 'black', b ...

cssreactjsmaterial-uithemes

Looking to temporarily hide a transparent div while the page is loading, and then reveal it once the page has finished loading?

Hey, I've created a code for a transparent div that I'm using behind some text on the homepage of a website to make the text more prominent: #transdiv { position:absolute; top:228px; width:852px; height:160px; background-colo ...

csscakephp-1.3

Issue with CSS line height - Struggling to determine the precise number of lines

Despite finding an old post on this topic, the most popular answer and other solutions didn't work for many people. Even years later, I am still facing the same issue. My goal is to create a div that is precisely 19 lines tall (ideally aiming for 19. ...

htmlcssfonts

My API is feeding data to the Material UI CardMedia image

Has anyone encountered a similar error while using the CardMedia API provided by Material-UI? I am currently utilizing the Card & CardMedia components from material-ui to display data fetched from an api. However, I am facing difficulty in displaying ...

javascriptreactjsmaterial-ui

Manipulate the contents of an HTML class using Javascript to substitute text with an empty string

Is there a way to create a JavaScript function that can remove text upon clicking from multiple HTML fields with the same class? I am facing an issue where my function is not clearing the data in the target field when "Yes" is selected in the trigger. Re ...

javascripthtmlgetelementsbyclassname

Exploring Concealed Data and Corresponding in jquery, javascript, and html

A unique template contains 2 hidden fields and 1 checkbox. Using the function addProductImage(), the template is rendered and added to the HTML page. To retrieve the values of the hidden fields (thisFile and mainImage) from a dynamically generated div wit ...

javascriptjqueryhtml

Tips for updating the content of a DIV element on a separate page

One question that often arises is how to change the content of a div element on a different page within a website. While it is common to use Ajax to dynamically update div content within the same page by fetching data from an external .html file, the proce ...

ajaxhtmlreplace

Is it possible to use CSS transitions to animate an absolute positioned element?

I am having trouble getting a CSS transition to work for animating an element's position change. I have tried using the all properties in the transition declaration like in this example: http://jsfiddle.net/yFy5n/3/ However, my goal is to only apply ...

csscss-transitions

How to Fetch Data Using jQuery AJAX in PHP Without Page Refresh

I am trying to prevent the page from refreshing when clicking on a select option, but when I do so, the data does not get updated. Here is the code: echo "<form name='frmtopdevotees' method='post' action='topuser_load.php&apos ...

javascriptphphtmlmysqlajax

What is the best way to populate a textarea element in Jade with text without any whitespace?

My current solution is functioning perfectly: textarea. #{myObject.myVar} Despite the success, Jade throws a warning when compiling the file: Cannot read property 'myVar' of undefined This warning makes sense since myObject may not be p ...

htmlnode.jspug

Steps for deactivating a textbox upon checkbox activation

When I try to implement the instructions from the textbook, I'm encountering an issue where clicking on the checkbox doesn't disable the textbox on my website. <form action="#"> Billing Address same as Shipping Address: <input ...

javascriptjqueryhtml

React Filter dropdown is functional only for the first use

I am currently working on developing a dropdown filter that is based on the Line Code value retrieved from an API. Although the filter is functional initially, it fails to work properly when attempting to apply it for the second time as the list becomes em ...

reactjs

Building a Gatsby website with a PHP contact form

Currently, I am developing a Gatsby portfolio and my goal is to integrate a PHP contact form. While exploring various examples online, many of them suggest using external resources to handle email sending directly from the website itself. One such recommen ...

phpreactjsgatsby

Centering the searchbar in the Bootstrap 4 navbar

I'm finding it difficult to center my search bar inside my navigation. I've experimented with different options like mr-auto and ml-auto or mx-auto, but the element just won't budge. I want to avoid using specific pixel values as it may affe ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to replace input fields with processed values?

I'm struggling to restrict the characters permitted in a number input field. Currently, I am unable to figure out how to remove invalid characters from the inputfield. Below is the code snippet that I am experimenting with: <template> <di ...

javascripthtmlvue.jsinput

Creating redux reducers that rely on the state of other reducers

Working on a dynamic React/Redux application where users can add and interact with "widgets" in a 2D space, allowing for multiple selections at once. The current state tree outline is as follows... { widgets: { widget_1: { x: 100, y: 200 }, widg ...

javascriptreactjsredux

The Bootstrap 4 navigation bar item unexpectedly jumps below and then wraps around

I am working on creating a navbar using the latest version of Bootstrap 4 (alpha6). <nav role="navigation" class="navbar navbar-light bg-faded"> <a class="navbar-brand" href="/"> <img src="/public/img/logo.png" height="36" alt="myLogo"&g ...

cssbootstrap-4

Container Slides Along Despite Accurate Measurements

In a recent project of mine, I utilized two containers positioned side by side. Upon clicking a button, my goal was to have the content container (essentially a false body) decrease its width while the menu container would slide in. Despite my best effort ...

htmlcss

Utilize Material UI autocomplete to conveniently search by either name or ID

I am currently working on a search modal that includes autocomplete functionality. My goal is to allow users to search for people by their names or ID numbers. However, once a user selects a person from the suggestions, I do not want the ID number to be di ...

reactjsautocompletematerial-ui