Responsive HTML code for a textarea, button, and table

I'm currently developing a website that includes a textarea, button, and table within the body content.

The responsiveness of my content works well, except for extremely narrow displays such as mobile phones. In such cases, the table does not wrap properly, rendering it unusable, and the button fails to expand to occupy the entire available space.

(The in-line code element seems to be causing issues; check out this reference on jsfiddle for a clearer example: JSFiddle Example)

What can I do to enhance the table's responsiveness so that it exhibits some form of word wrapping or scrolling behavior when the window size changes, similar to how the textarea behaves?

javascripthtmljquerycss

Answer №1

I have made some adjustments to your code: adjustments link

  1. In order to ensure the table is responsive on smaller screens, I updated the fixed width of 553px to "max-width: 553px". This modification allows the element not to exceed 553px on larger screens and automatically adjust its size to fit smaller screens.
  2. To expand the button on smaller screens, simply add a max-width (e.g., "max-width: 553px" to match the table) and set "width: 100%" to make sure it occupies the full width on smaller screens.
  3. To enable word wrapping for the table contents, include "word-wrap: break-word;" and "white-space: normal;" to the table, th, td elements.
  4. It's worth noting that navigating through your code might be challenging due to the mixture of inline and declarative CSS styles. It's recommended to stick to one type for consistency, especially when certain styles are frequently used throughout the code. Consider applying styles to the entire element or specific classes instead of individual elements.

            button {
                border: 2px solid black;
            }
            table, th, td {
                border: 2px solid black;
                background: white;
                color:black;
                height: 100%;
                white-space: normal;
                word-wrap: break-word;
            }
                  
                  table { 
  table-layout:fixed;
  width:100%;
}
<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <link rel='icon' href='https://cdn4.iconfinder.com/data/icons/48-bubbles/48/06.Tags-512.png' type='image/x-icon' />
    <title>tagger.site</title>

    <!-- jQuery CDN - Slim version (=without AJAX) -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    
    <!-- Popper.JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    
    <!-- Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+...

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 Safari Mobile's object-position feature

I'm inquiring about an issue with Safari Mobile and the CSS object-position/object-fit property. I attempted to use it, but unfortunately, it's not working for me. I've come across conflicting answers regarding Safari Mobile's support ...

htmlcsssafarimobile-safari

The functionality of JQuery fails to work properly when receiving an AJAX response

I have separated my code into three main sections: a PHP file, a jQuery section with an AJAX function that requests data, another PHP file. The response from the AJAX request is HTML that needs to be added at the beginning of a specific DIV inside the i ...

javascriptphpjqueryhtmlajax

Solving layout issues / Techniques for determining element heights

This new question is in relation to my previous one: How to position relative elements after absolute elements I have updated the JsFiddle from that question to better represent my current HTML, which I unfortunately do not have a URL for at the moment. Y ...

javascripthtmlcss

Steer clear of using the character sequence "&#8220;" in both PHP and

I am struggling with the encoding (I think). A script I wrote fetches a PHP file through AJAX that generates a JSON file. The JSON file appears as follows in Firebug: ["&#8220;This is a word&#8221; This not"] I am trying to find a way to remove & ...

phpjavascriptjsonencodingcharacter-encoding

JQuery ID Media Queries: Enhancing responsive design with targeted

Is it possible to integrate a media query into the selection of an ID using JQuery? For example: $('#idname') $('@media (max-width: 767px) { #idname }') In essence, can you target the #idname with that specified media query in JQuery ...

javascriptjquerycss

Parent: Using Flexbox vs Child: Choosing between inline-block or inline elements (Advantages of utilizing CSS3 flexbox?)

I've been exploring the capabilities of CSS3's new "display: flex" property and trying to determine its advantages. So far, I haven't discovered any significant benefits beyond creating a virtual horizontal line within each flex box containe ...

cssresponsive-designflexbox

Applying CSS transitions and transforms to SVG elements

Having trouble animating an SVG group with CSS transitions after applying a CSS transform? Check out my code below and let me know if you spot the issue. Inline SVG Code <a href="javascript:void(0)" class="hub-icon-container"> <svg xmlns="ht ...

htmlcsssvg

Error: Unable to interpret the URL provided in /api/posts/1

When working on my next.js 13 app, I encountered an issue while trying to fetch individual blog data from a local MySQL database. In the src/blog/[id]/page.js file, I have the following component: const BlogPost = async ({ params }) => { const data ...

javascriptnext.jsnext.js13

Slide feature in Drupal Views allows you to create dynamic

This is the design I currently have: https://i.stack.imgur.com/P6spc.jpg For example, when you click on the "Structure" header, it opens up the contents and shows an image. I have created a content type and installed Views. I have separated the image, h ...

phpjavascriptjqueryajaxdrupal-7

Why are the UI components (`Card Number`, `MM/YY`, `CVC`) not being displayed in the React app when using Card

Having an issue where the CardElement Ui component is not visible in the image provided. It should appear above the Order Total: $0 next to the payment method. https://i.sstatic.net/NCK5z.png I've attempted various debugging methods without success. ...

javascriptcssreactjsexpress

Tips for correctly retrieving an input value using MySQL SELECT during Ajax requests in a WordPress environment

Currently, I am facing an issue where the input field value is being returned as null or as an array in a SELECT query. I have used jQuery to obtain the value and I am trying to utilize it for a query through Ajax on WordPress. Here is my HTML: <inpu ...

phpjquerymysqlajaxwordpress

I'm a beginner in learning javascript and I'm struggling to fix this code. Can someone please help me?

I can't figure out why the code isn't functioning properly. It was supposed to display the number of clicks on the button in the console each time it is clicked. //Below is the code let JoinButton = document.getElementById("join-button&quo ...

javascript

Challenges with CSS in Google Chrome web browser (Input field and Submit button)

Having trouble with the alignment of a textbox and button on Chrome, they're not displaying correctly. Here are examples from different browsers; notice how the textbox in Chrome is misaligned. Internet Explorer/Firefox https://i.stack.imgur.com/mf ...

htmlcss

The CSS table-cell element causes adjacent table-cell content to reposition

The table inside the "center" div is causing the contents in the "left" div to be offset by a few pixels from the top (about 8 in my browser). When you add some text before the table, this offset disappears. Why is this happening? Is there a way to preven ...

htmlcsscss-tables

CodePen experiencing issues with JS/jQuery coding functionality

Experimenting on CodePen, I am practicing using JS and jQuery with HTML. HTML: <button>asdasads</button> JS: $('button').on('click', function() { alert('woot'); }); Visit this pen, unfortunately it's ...

javascriptjquerycodepen

Mobile responsiveness issues with Bootstrap 4 row

<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS ...

cssbootstrap-4media-queries

Loop through a JSON object

I am looking to iterate through a JSON object called transactionByFop. Here is the HTML code: <div ng-show="searchController.orderCAT.results.length" ng-repeat="(key,obj) in searchController.orderCAT.results track by $index"> <dl sty ...

javascripthtmlangularjsarraysjson

Converting an array of arrays into an object with an index signature: A step-by-step guide

I find myself facing a challenge where I have two types, B and A, along with an array called "a". My objective is to convert this array into type B. Type A = Array<[string, number, string]>; Type B = { [name: string]: { name: ...

javascriptarraystypescriptecmascript-6

Should I deploy the Angular2 demo app within Rails or as its own standalone application?

Currently diving into the world of Angular2 and completing both the quickstart and heroes tutorial. Each time I start these applications, I use the "npm start" command. On top of that, I've developed a Ruby on Rails backend application alongside an A ...

javascriptruby-on-railsangularjsdeploymentnpm

Troubleshooting: Why are my images not displaying in webpack and node.js setup?

My problem: I'm facing an issue with background images in my project. I have included two images and used file-loader to bundle them through webpack. While the images display correctly in the app during development using webpack-dev-server, they disap ...

javascriptnode.jsherokuwebpack