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

Creating a PDF document using html2pdf: A step-by-step guide

Currently, I am immersed in a project using React. The main goal right now is to dynamically generate a PDF file (invoice) and then securely upload it to Google Drive. In the snippet of code provided below, you can see how I attempted to create the PDF f ...

javascripthtmlreactjsjspdfhtml2pdf

Interactive HTML Table in PHP Email

I am curious to know if it is possible to include a user-defined function in PHP Mail. $to = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ceabb6afa3bea2ab8eabb6afa3bea2abe0ada1a3">[email protected]</a>"; $mess ...

phphtmlmysqlemail

When utilizing Blazor to create dynamic URLs within a loop, incorrect references may be generated

While working on a Blazor web assembly application, I encountered an issue when trying to loop over content to generate URLs for MP3 files. The media files are named "1.mp3", "2.mp3", "3.mp3", and so on. Imagine having a razor page with the following con ...

c#htmlrazorforeachblazor

Adding a background color to the body of your PHP and HTML email template is a simple way to enhance

I am currently using a confirmation email template with a white background, but I want to change it to gray. However, I'm unsure how to update the PHP file containing the email function below: $headers = "From: " . stripslashes_deep( html_entity_deco ...

phphtmlcsshtml-email

Ways to recognize when a button has been pressed

I developed my website using the CodeIgniter framework. Here is my personal website On the homepage, if I click on the "landscape" picture (top right) or the "landscape" button in the menu, it takes me to the "landscape" page. However, when I return to t ...

phpjqueryhtmlcsscodeigniter

checkbox inspired by the design of the iPhone

I'm looking to create a custom checkbox! <label id="sliderLabel"> <input type="checkbox" /> <span id="slider"> <span id="sliderOn">SELECTED</span> <span id="sliderOff">SELECT</span> ...

jquerycsscss-transitions

Using Responsive Design with Bootstrap and Media Queries

As a beginner in front-end development, I have recently learned about media queries and their functionality. Having previously studied Bootstrap, I can't help but wonder if media queries are actually necessary. After all, Bootstrap seems to offer simi ...

csstwitter-bootstrapwebfrontendmedia-player

Restricting the type of user input in HTML forms

Requirements: Input must be a whole number between 2 and 99, inclusive. Current Solution: <input required type="number" min="2" max="99" oninput="this.value = Math.abs(this.value)" maxLength="2" matInp ...

javascripthtmlangular

What is the best way to achieve this smooth scrolling animation on the page?

While browsing the website , I noticed a unique page scrolling effect that caught my eye. Unsure if they were using default bootstrap code or their own custom code, I was intrigued by how it worked. I attempted to find similar effects online but struggled ...

htmlvertical-scrolling

Position the middle character within a span that has the identical width and height

My goal is to align characters in the center of a span. CSS span{border-radius:10px; width:20px; height:20px; color:#fff; background:#cc0000; text-align:center; line-height:20px; display:block;} HTML <span>+</span><br> <span>-&l ...

htmlcss

Verify if a checkbox is selected upon loading the page

Hey there, I have a jQuery change function set up to turn an input text box grey and read-only when a user selects a checkbox. However, I'm interested in adding a check on page load to see if the checkbox is already selected. Any suggestions for enhan ...

javascriptjqueryhtml

Enhance user experience with AngularJS Bootstrap autocomplete feature by automatically filling input box when hovering over dropdown options

I am currently implementing the AngularJs Bootstrap typeahead functionality. Typically, when we enter text that matches an option, the dropdown list appears. https://i.stack.imgur.com/395Ec.png What I aim for is to automatically fill the textbox with the ...

javascriptcssangularjsangular-ui-bootstrap

A guide to creating a personalized horizontal dashed separator in Material UI

I'm looking to customize a divider template by turning it into a horizontal dashed divider, but I'm struggling to override it. Even when attempting an sx edit with a borderRadius, the divider doesn't change as expected. source code: import ...

cssreactjsmaterial-uidividersx

Leveraging jQuery for vertical alignment of an image

I am trying to vertically center an image with the class .personal within a container with the class .personal-row (located inside .row-main) on page load and when resizing. Initially, I attempted using vertical-align: middle;, but that did not yield the d ...

jquerycss

The Jquery delete button is efficiently targeting and removing all image sources and identifiers within a Multiple Upload feature

I need help creating a delete button for my ImageUploader. I can successfully select an image and display it in a div on my page, but deleting the current image is proving to be challenging. When I click on the delete button, instead of getting the id and ...

javascriptjqueryhtml

Why is my HTML image stored in the database not showing up in TCPDF?

Currently, my situation involves using TCPDF to retrieve content from a MySQL table row that contains HTML code like this: <p><a href="x.html"><img src="http://1/2/3/x.jpg" width="x" height="x"></a></p> The problem arises wh ...

phpmysqlhtmltcpdf

Images within links appear with blue lines underneath them

Currently, I am in the process of adding links to a footer by using <img> tags with SVG images. However, I am encountering an issue where there are small blue lines under the icons. After searching online, it seems that you need to add this CSS code: ...

htmlcss

Setting the appropriate width for the main div element using CSS

Imagine wanting to craft an HTML page featuring a primary div housing all of the content. In this scenario, the div should enclose other divs and remain centrally fixed on the page, similar to the image provided. How should one determine the appropriate w ...

csshtml

IE's inconsistent float alignment causing display issues

My challenge is getting my div elements to float correctly in Internet Explorer. They are displaying perfectly in Chrome and Firefox, but IE seems to be messing up the code. The jsfiddle link showcasing the issue can be found here: http://jsfiddle.net/vlya ...

htmlcsswordpressinternet-explorer

What is the best method for securing my API key within the script.js file while utilizing dotenv?

My goal is to conceal my API key using dotenv. Interestingly, when I replace require('dotenv').config(); with my actual API key in the code as apiKey: process.env.API_KEY, it works fine despite not using process.env.API_KEY. I made sure to inst ...

javascripthtmlapiapi-keydotenv