Contact on the go with our handy mobile contact form

Having some difficulties with the contact form on my website. The link to the form is: here.

I am currently working on making the form mobile-friendly (the rest of the site scales down using @mobile screen tags in the CSS).

The form is stacked, so there is no need for the fields to float. However, I would like the container and textarea to shrink down to better fit mobile screens.

I have tried implementing @mobile screen with the #contactus elements in the CSS, but it does not seem to be effective. Any tips or suggestions?

htmlcssforms

Answer №1

There are a variety of challenges that you are currently facing. Allow me to address them one by one:

  1. The contact form is embedded within an iframe, adding unnecessary complexity.
  2. The textarea has cols="50" specified, causing it to extend beyond the width of the mobile screen.
  3. The fieldset is defined with a width of 320px, and with an additional rule of padding: 20px. The combined CSS properties will result in a 360px wide fieldset.
#contactus fieldset {
  width: 320px;
  padding: 20px;
  /* calculated width (320px + (20px*2)) == 360px */
}

Furthermore, utilizing developer tools like Firebug or Chrome / Safari Developer Tools can be invaluable in situations like these. They allow you to easily identify which elements are exceeding the screen boundaries, make real-time CSS adjustments, and observe your design changes promptly. It's an efficient time-saving technique.

Regarding the use of cols on the textarea element, you may also benefit from exploring this related question: sizing a textarea with CSS vs with cols and rows

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

Is it possible to modify the size of a bullet image in Javascript?

Can an image bullet style loaded via a URL be resized using JavaScript code like this: var listItem = document.createElement('li'); listItem.style.listStyleImage = "url(some url)"; listItem.style.listStylePosition = "inside"; I aim to increase ...

javascriptcss

The xModal window will only pop up once, after which a page refresh is required

My modal window opens when a user clicks on a div, but I'm having an issue. The modal window doesn't reopen when I click on the div again. Here is my code: <div onclick="document.getElementById('id01').style.display='block&apos ...

javascriptjqueryhtmlcssbootstrap-modal

Steps to designing an Arrow with styled-components

I am currently working on customizing my orange arrow to resemble the pink arrow, but I want to achieve this without relying on an external CSS library like bulma. The reason the pink arrow looks different is because it utilizes the bulma library in its st ...

cssnext.jsstyled-components

Display the div only when the radio button has been selected

I have been attempting to tackle this issue for quite some time now, but unfortunately, I haven't had any success. My goal is to display a specific div on the webpage when a particular radio button is selected. While I have managed to achieve this by ...

javascripthtmlformsinputradio-button

How can you change the width of <td> and <th> elements?

I am trying to keep a table header fixed at the top of a window, but for some reason, setting the widths of the <td> and <th> elements as shown below is not resulting in them having the same width (the column headers are misaligned with other c ...

htmlcsscss-tables

Creating a typewriter animation using Tailwind CSS and Next.js

I am currently working on implementing a typewriter effect that is almost exactly how I want it. However, I am facing an issue with the printing process. Right now, each word gets printed on a new line and falls into place when done printing. What I actual ...

cssnext.js

Aligning three hyperlinks evenly to spread across the webpage

My professor provided the class with an image that may resemble something he could ask us to recreate on an upcoming exam. He suggested we try replicating it at home to study. I have most of it figured out, but there are three links positioned perfectly ac ...

htmlcss

"Using html_attr with the attribute "href" does not return any value in the rvest package

My objective is to extract the URLs linked with specific CSS elements on a website using rvest. Despite trying various methods, such as using the html_attr function with the 'href' argument, my current script only returns NA values instead of the ...

htmlcssrweb-scrapingrvest

Transferring uploaded files to another script or page

Currently, I am attempting to pass an uploaded file to a second script. My method involves utilizing an HTML form for the file upload and PHP to store the file. The PHP variable in question is: $_FILES["Picture"]["name"] I understand that when construct ...

phpfilepostfile-uploadforms

Correcting W3C validation issues is essential

I am encountering errors in my W3C validation process. Even though I have set <!DOCTYPE HTML> for my page, I continue to experience issues as shown in the image below. I have been trying to troubleshoot and resolve these errors without much success ...

javascripthtmlcssw3cw3c-validation

Is using CSS as an HTML attribute considered poor practice?

I've been noticing an increasing trend of combining HTML, CSS, and JavaScript together in web development. However, I was taught to keep them separate with HTML linking to the sources/scripts. While using the style attribute in HTML is sometimes acce ...

htmlcss

What steps can be taken to resolve the link prefetch warning in a Next.js application?

I am currently working on a Next.js application using version 13.4, and I've encountered a warning in the console: After preloading the resource at <URL>, it was not used within a few seconds of the window's load event. Please ensure that i ...

cssreactjsgoogle-chromenext.js

How to insert additional spacing within an input tag class in dynamic HTML using jQuery

When creating an html table dynamically from json data, I encountered an issue with adding space inside my input button control. It seems that after separating two classes with a space, the code is not functioning properly in this snippet environment. Howe ...

jquerycssasp.net-mvcdynamic-html

Having trouble getting my list items to display on individual lines within the foreach loop. It just doesn't seem to be working as expected

In the event listener, I need to ensure that my list items within the forEach loop are not displaying on separate lines. This issue is causing a problem in a lengthy section of code. The goal is to update questions when an answer is clicked from a list. B ...

javascripthtmlcss

Tips for dynamically incorporating input forms within AngularJS

I am trying to dynamically change the form inputs using ng-bind-html. However, I am only able to display the label and not the text box on the DOM. The content inside ctrl.content will depend on the values received from the server. Important Note: The ...

javascripthtmlangularjshtml-sanitizing

Closing a modal from a nested modal sub-component

I am facing a query regarding how to close a Modal from within a sub-component of the same Modal itself. Allow me to elaborate on what I am trying to achieve here. I have developed a Modal that is triggered from a Component to enable users to add a new Cl ...

reactjsformsnext.jsmodal-dialog

Utilize jQuery to extract all values from the second cell of a table and store them in an array

I have a task that involves pushing numbers from text boxes into an array. These text boxes are located in the second cell of each table row, while the third cell contains a date picker. Currently, the code snippet provided retrieves all values from both ...

javascriptphpjqueryhtmlhtml-table

What is the best way to conceal a portion of a child element that exceeds the size of its parent container?

My <div> contains a <p>, but sometimes the text in the <p> exceeds the boundaries of the div. <div style="width: 100px'; height='100px';"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit ...

htmlcss

The flipping action will only occur on the initial card

I am working on creating a unique photo gallery that allows users to flip the picture by clicking or tapping on it. Once flipped, users will be presented with additional information about the image and a link. I have included all of my CSS, JS, and HTML be ...

jqueryhtmlcsscss-transforms

Ensure consistency in CSS3 background color transitions

There are multiple elements on the webpage with background transitions that change from one color to another: @-moz-keyframes backgroundTransition /* Firefox */ { 0% {background-color:#ff7b7b;} 33% {background-color:#7fceff;} 66% {backgr ...

javascriptjqueryhtmlcss