Text box size in user input not adapting on mobile devices

Website: Visit the Cutter Travel Calculator here

I've encountered an issue with my user input text boxes on mobile. Despite setting their width using the formidable forms plugin, the size adjustment doesn't seem to apply when viewed on mobile devices. It appears to default to the page size width instead. Does anyone have a solution for fixing this?

Answer №1

Include this CSS snippet in your plugin or theme's style.css file:

@media only screen and (max-width: 600px){
 .frm_form_fields .frm_fields_container > .frm_form_field {
        grid-column: 1 / span 3 !important;
    }
}

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

Tips for activating an HTML input field using Javascript

I am currently using localStorage to store a string input by the user as a title, which will be saved for future visits. I would like to implement a button that allows the user to delete the displayed text (from localstorage) and enables the input field fo ...

Is there a method to instruct angular-cli (for angular 2) to produce a minified version of css files?

When running "ng serve" in angular-cli, the generated css is not minified as expected. Is there a specific setting to configure in angular-cli-build or an additional plugin to install? This is the content of my angular-cli-build.js file: var Angular2App ...

Animating distance with the power of animate.css

I have implemented animate.css for a login form, but it is not behaving as desired. Currently, I am utilizing the fadeInDown animation, however, it is fading in from a greater distance than intended. I would prefer it to fade in from just around 20px below ...

Refresh the counter on WordPress database using an AJAX request

I am in the process of tallying votes on my website. When a user submits the form, I would like to make an ajax call that updates the total number of votes displayed at the bottom of the page. To achieve this, I am counting the number of rows in a table wi ...

Display attribute details for selected variable in woocommerce

Is there a way to dynamically show custom text based on the user's selection of a variable product? Specifically, I have an attribute named 'pricing' with a tag called 'deposit', which has a descriptive text added to it. I want th ...

Styling the Padding of MUI Select Component in ReactJS

Currently, I am facing an issue with the Material UI Select component where I am trying to decrease the padding within the element. The padding seems to be a property of one of the subclasses .MuiOutlinedInput-input, but my attempts to change the padding h ...

Steps for compiling SCSS to CSS using Angular-CLI and moving it to the assets directory

I am currently working on an Angular 5 project with an assets folder where I store my common CSS file and reference it in index.html. I now plan to create a new folder called "sasstyles" and place some .scss files there. When I compile or run the project ...

Printing the contents of a datatable in HTML can be achieved in VB.NET by including headers and setting paper orientation, fit to page, and grand total for print preview and direct print

I'm attempting to print the contents of a datatable in HTML for print preview and direct printing, including headers, setting paper size, orientation, and fitting to page in VB.NET. While it may be easy to accomplish this using an rdlc report, I am u ...

What is the best way to handle a single promise from a shared listener?

I am working on implementing an event listener that will receive events from a server whenever a specific task is completed. I want to structure each task as a promise to create a more organized and clean workflow. How can I resolve each task promise by i ...

Encountering an unusual issue: Unable to access undefined properties (specifically 'get')

I'm struggling to get the order history screen to display the order history of a specific user. Every time I navigate to the path, I encounter the error mentioned in the title. I double-checked the path for accuracy and made sure there are no spelling ...

The issue with HTML5 anchor download attribute for saving files cannot be resolved

When I use an anchor tag like this.. <a class="btn btn-download" href="https://www.anotherdomain.com/file.jpg" download="customname.jpg">Download</a> The file is downloaded as file.jpg instead of customname.jpg Interestingly, it works fine i ...

Styling a div element in CSS so that it adjusts its size to fit its

How can I make a div element adjust to its content and also break the line so that the next element appears below it? I attempted setting the display property to inline-block, but then the div no longer breaks the line... Normally, it breaks the line, but ...

A full-width div containing a child span is unable to be aligned to the right

After reviewing this fiddle, I'm struggling to get my menu aligned correctly at the right edge of the overall "card". Despite trying various methods like margins, right: 0, and float, nothing seems to work as expected. In some cases, I even end up los ...

Utilizing jQuery to transfer a row between two tables and reversing the action

This question has been asked a few times before, but I still haven't found a clear answer that applies to my situation. So here is my version of the issue: I have two tables - one is a DataTable with a list of properties (such as homes), and the othe ...

my initial attempt at using Firebase cloud functions

I'm currently attempting to create my first Firebase Cloud Function. My goal is to take the value of the 'name' field from the 'amr' document and add it to the 'ahmed' document under a new field called 'newName' ...

Boxes that change and adapt to the user's input

Need guidance on a tricky problem! I am working on a form to input various cities that the user wants to visit. The form currently consists of one form box and a submit button. My goal is to allow the user to enter multiple cities by clicking an "Add 1 ...

Performing Jasmine unit testing on a component that relies on data from a service, which itself retrieves data from another service within an Angular 2+ application

Attempting to implement unit testing for a service using httpmock has been challenging. The service in question utilizes a method to make http get calls, but I have encountered difficulties in writing the test cases. saveservice.service.ts -- file const ...

What are some ways to utilize JavaScript for expanding an HTML form?

I am in the process of developing a basic web application that allows users to create messages with attached files. multiple html file inputs using this javascript link: http://img38.imageshack.us/img38/4474/attachments.gif The functionality to "attach a ...

"Looking to spice up your website with a dynamic background-image

I've encountered a problem with my CSS code for the header's background image. Despite trying various methods to create a slideshow, nothing seems to be working. Can someone provide guidance? I have four banner images named banner1, banner2, bann ...

Display HTML content using AJAX within a div element

Within my HTML code, I have the following: <li class="register"><a href="">Registreer</a></li> as well as <div id="content"> </div> I attempted to load an HTML file into the div using the code below in the header se ...