I have to adjust this code so that it responds effectively to different smartphone screen sizes

Encountering an issue with a calculator code on my website. The code comprises two tables - the upper table allows users to input values and calculate, while the lower table displays a detailed scoresheet. The code functions perfectly on PCs; however, on smartphones, the upper table is not responsive to screen size. I have to scroll horizontally to access all fields in the table, whereas the lower table works fine on smartphone screens.

The problem seems to lie within the user-input fields of the upper table, which are unnecessarily wide and unresponsive to smaller screens.

Seeking assistance in modifying the code to be fully responsive on smartphone screens.

Thank you!

The Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GPA Calculator</title>
<!-- CSS styling -->
...

All details provided above for reference.

javascripthtmlcss

Answer №1

The issue you're encountering is due to the lack of width set for the inputs within the upper field. Because their width hasn't been specified, it remains static and unaffected by changes in screen size.

To ensure responsiveness, you can set their width using percentages. Here's how:

Firstly, add a class to the inputs in your HTML code:

<td><input type="text" class="input" required></td>
<td><input type="number" value="1" min="1" class="input" required></td>

Next, define the width in your CSS:

.input {
  width: 80%;
}

Feel free to adjust the width percentage according to your preferences, ensuring it is relative to the parent's width for flexibility.

If you encounter any issues while implementing this solution, please let me know.

Answer №2

Insert the following CSS code into your stylesheet:

input {
    display: block;
    width: 100%;
}

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

The concept of 'this' in TypeScript classes compared to JavaScript's scope

Is there a way to change the custom icon of a video when it is toggled between Play and Pause? ngAfterViewInit() { const vdoCont = document.querySelector('.video-player'); const vdo = vdoCont.querySelector('video'); vdo.addEventL ...

javascriptangulartypescriptthis

Disable functionality not functioning properly on button attribute

I've created a demo on JSFiddle here: http://jsfiddle.net/qJdaA/2/. The goal of this code is to disable the button with the ID #monitor if no checkboxes are checked. var checked = $('#status_table tr [id^="monitor_"]:checked'); if (checked. ...

javascriptjquery

Assigning automatic roles based on the Discord.js v12 presence status of users

When someone is playing, I want to add a role using the presenceUpdate event However, every time I attempt this in discord.js v12, I encounter the following error: TypeError: Cannot read property 'activities' of undefined What mistake am I maki ...

javascriptnode.jsdiscorddiscord.js

Transform the array into an object containing corresponding key-value pairs

In my dataset, I have an array containing various values: [ { "factor": { "data": "f1", "val": [ "val1" ] } }, { "factor": { "data": "f2", "val": [ "val2" ] ...

javascriptarraysjsonobject

Managing data flow in React and Reflux: Utilizing a single component duplicated in the DOM

Imagine this Tree scenario: <Homepage> <HeaderSection> <Navbar> <ShoppingCartComponent> </Navbar> </HeaderSection> <MainContent> <ShoppingCartComponent> &l ...

javascriptreactjsrefluxjs

Using document.getElementById will only target a single item

Essentially, I am facing an issue where the document.getElementById() function only works for the first product when I click on the addToBasket button. It always changes the details of the first product, even if I click on a different one. Is there a way ...

javascriptreactjs

implement a new directive in AngularJS that references another directive in HTML

Check out the Fiddle here Upon button click, a modal window appears. Inside this modal, there is a <template-placeholder></template-placeholder>. When the button is clicked, an if-check is performed to ensure it's the correct button. If ...

javascripthtmlangularjsangularjs-directive

Assigning values to template variables in Express 4's routes/index

Recently, I started using node.js and express. To set up express 4, I used the command "express myAppName" in the terminal, which created a default directory with Jade templates as default. The main file, app.js, has the following standard express boilerp ...

javascriptnode.jsexpresspug

Highlighting the active nav-item in Bootstrap-5 is proving to be a challenge

I'm having trouble with the Bootstrap navbar. I want to change the color of the active nav-link, but it's not working as expected. I am currently using Bootstrap-5. Below is the CSS code I have: .nav-link { color: #666777; font-weight: 4 ...

htmlcssbootstrap-5

The consequences of jQuery Ajax Memory Leaks

After reading through several other posts on the topic, I have noticed a memory leak issue when making repeated ajax calls with jQuery (every 30 seconds in my case). Switching from using $get to $post helped reduce the size of the leak, but it still occurs ...

javascriptasp.netajaxjquery

Can the performance of parsing a JSON dataset be affected by having empty arrays within it?

As I work my way through a rather extensive JSON data set with the help of DoT.js to generate a display template, I've noticed something intriguing. There are more than 3400 empty arrays present in a section of the JSON that is not being utilized for ...

javascriptjsontemplatesdot.js

After a brief delay, I aim to eliminate a className or restart the class animation when a certain condition is satisfied

Objective: My goal is to create a feature where the price number highlights with a color for a brief moment when there is a price change using toggleClassName. Challenge: The issue arises when the iteration is UP UP or DOWN DOWN, as the element already ha ...

cssreactjs

What is the method for displaying the html required attribute in Django forms?

I am encountering an issue with a form field in Django. The email field is defined with the required attribute, but when rendered in HTML, it is missing the required attribute and is using type "text" instead of "email". The max_length attribute is, howeve ...

djangoformshtml

Transforming the timezone of a date from the Backend to the timezone selected by the user in the User

I have an API that provides dates in the format: 12/23/2023 at 03:31 a.m. CST My goal is to convert this to a date with the user-selected timezone in the following format: 12/23/2023 at 7:31 p.m. The timezone part is not required for display in the UI. c ...

javascriptdatetimezone

Using dialogue boxes instead of alert and prompt functions in jQuery can enhance user interaction and

I need assistance with implementing a dialog feature in fullcalendar. Currently, I am only able to trigger an alert or prompt when clicking on an event. What is the appropriate JavaScript code to display a dialog? Here is my jQuery code: $(document).read ...

javascriptjqueryeventsdialogfullcalendar

Steps for populating a table with data from a JSON array

I am currently facing a challenge in populating an HTML table with data retrieved from a two-dimensional array. The information is being fetched through an $.ajax script after executing a php/MySQL query. Despite successfully parsing the data in the succes ...

javascriptjqueryajaxjson

Location of chat icon in Dialogflow messenger

After successfully embedding the Dialogflow messenger in my website, I noticed that in mobile view, the chat icon is blocking the bottom navigation bar. You can refer to the screenshot here. Is there a way to reposition the chat icon higher on the page? I ...

javascripthtmlcssdialogflow-es

AngularJS score tracker malfunctioning

Can you please review this for me? http://plnkr.co/edit/i4B0Q2ZGiuMlogvwujpg?p=preview <input type="radio" name="op_0" ng-value="true" ng-model="n1"> True <input type="radio" name="op_0" ng-value="false" ng-model="n2"> False <input type="r ...

javascriptangularjscounter

Are you struggling with NodeJS asynchronous callback not achieving success?

Currently, I am working on developing a scraper that utilizes the async.map feature to iterate through an array, perform certain logic, and then map them to different values. async.map($('.listing tr').toArray(), GetLink, function(err, results) ...

javascriptnode.jsasynchronous

Issue with Bootstrap 5 tooltip placement at the top when the page is scrolled

Hey there, I've been facing an issue with tooltips in Bootstrap specifically when the placement is forced to "top." Currently, I am using version 5.1.3. I attempted to create a code snippet to showcase the problem, but unfortunately, it's not re ...

javascripthtmlcsstwitter-bootstrap