Customize Your Contact Form in Wordpress with a Stylish 2-Column Layout

Hey there, I've encountered a little problem with my website. My website is built on Wordpress and uses Contact Form 7, which has been heavily customized with CSS. While it looks great on desktop, the email field appears too small on mobile devices. I'm hoping to adjust the width so that the email field takes up about 70% of the container, leaving the submit button at 30%. Can anyone lend their expertise in tweaking the CSS to achieve this? Thanks a bunch!

::-webkit-input-placeholder { /* WebKit browsers */
   text-align: center;
   text-transform: uppercase;
   font-family: "Poppins", sans-serif;
   font-size: 12px;
   font-weight: 600;
   opacity: 0.8;
   color: #a21cea !important;
   }

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   text-align: center;
   text-transform: uppercase;
   font-family: "Poppins", sans-serif;
   font-size: 12px;
   font-weight: 600;
   opacity: 0.8;
   color: #a21cea !important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   text-align: center;
   text-transform: uppercase;
   font-family: "Poppins", sans-serif;
   font-size: 12px;
   font-weight: 600;
   color: #a21cea !important;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
   text-align: center;
   text-transform: uppercase;
   font-family: "Poppins", sans-serif;
   font-size: 12px;
   font-weight: 600;
   opacity: 0.8;
   color: #a21cea !important;
}

.wpcf7-inline-wrapper .wpcf7-inline-field input:not([type="submit"]), .wpcf7-inline-wrapper .wpcf7-inline-field input::-webkit-input-placeholder {
 color: #a21cea !important;
}
.wpcf7-inline-wrapper .wpcf7-inline-field input:not([type="submit"]), .wpcf7-inline-wrapper .wpcf7-inline-field input::-moz-placeholder {
 color: #a21cea !important;
}
.wpcf7-inline-wrapper .wpcf7-inline-field input:not([type="submit"]), .wpcf7-inline-wrapper .wpcf7-inline-field input:-ms-input-placeholder {
 color: #a21cea !important;
}

<!-- More CSS styles omitted for brevity -->
csswordpresscontact-form

Answer №1

@media (max-width:580px) {

.wpcf7-inline-wrapper.wpcf7-newsletter p:nth-child(2) {
    width: 100%;
    margin:10px!important;
}

}

The code snippet above ensures that the EMAIL field and SUBMIT Button are stacked vertically when viewed on devices with a maximum width of 580px.

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

Modifying the weight of fonts in TVML components

Currently, I'm in the process of developing a TVML app specifically for the Apple TV. Lately, I've been experimenting with making some style adjustments to various elements within the app. Following the guidance provided in the TVML documentatio ...

cssxmltvostvml

Tips for toggling the visibility of a <div> element with a click event, even when there is already a click event assigned

No matter what I try, nothing seems to be working for me. I'm looking to hide the <div id="disqus_thread"> at first and then reveal it when I click on the link "commenting", after the comments have loaded. This particular link is located at the ...

javascriptcssajaxshow-hideblogger

Enhance user experience with a flexbox navigation bar that dynamically adjusts link heights to ensure

I am struggling with making my navbar links the same height and keeping their text vertically centered, especially when they wrap onto multiple lines on a narrow viewport. While I have achieved vertical centering, I am facing difficulties in ensuring that ...

htmlcssflexbox

The offspring surpasses the parent's limits and extends beyond its

I am designing a webpage layout that includes 2 navigation bars (top), a top-graphic (middle) flexbox, and a content flexbox (bottom). Within the top-graphic flexbox, I want to add a black box for text. However, I am facing issues with the box overflowing ...

htmlasp.netcss

Defaulting summernote to display in italics

Looking for a way to italicize a series of summernote inputs by default? I have removed all toolbar options except the italics button. Here's the HTML generating these inputs: <div style="width:250px;"> < ...

javascriptcssasp.net-mvcsummernote

Scrollbar malfunction in Angular and Bootstrap主 The main scrollbar in Angular and Bootstrap is un

I am currently facing an issue with my Angular app using Bootstrap 5. The main html/body scrollbar does not work when elements overflow the view. I have tried various solutions such as setting a fixed height, adjusting overflow-y to scroll or auto for body ...

htmlcssangularbootstrap-5

Exploring the power of CSS grid in React/Gatsby for creating dynamic layouts with varying numbers of columns in each

I need help creating a dynamic grid layout where the number of columns alternates between rows. For example, I want the first row to have one column, the second row to have two columns, and so on. Right now, my grid only has two columns per row. Does anyon ...

cssreactjscss-gridgatsby

The variants array in VUE.js is not displaying properly

I have recently been delving into vue.js for my work and encountered a significant issue. I wanted to create a simple TODO application. In my index.html file, I only have a div for a header and a root div with an ID: #app. Inside the root div, there is a ...

javascripthtmlcssvue.js

Dealing with challenges in integrating ngx-masonry with Angular 14

I am currently working with Angular 14 framework and the ngx-masonry library (https://www.npmjs.com/package/ngx-masonry/v/14.0.1). However, I am facing some issues where it is not functioning correctly. I would appreciate any assistance or guidance on how ...

htmlcssangulartypescriptnpm

In JavaFX, when adjusting the transparency of a popup window, only the brightness changes while the solid color remains unchanged, effectively concealing

Is it possible to have a transparent popup window (errorDialog.fxml) on top of the main window (mainWindow.fxml) with 50% opacity while still showing the content of the main window underneath? My attempts at setting the background color of the overlay insi ...

cssjavafxfxml

Is it possible to adjust the CSS code linked to the HTML tag based on the specific webpage being viewed?

I am facing an issue with the homepage of my website, which uses Scrollmagic.js for smooth scrolling. In order for the sticky footer CSS to work properly on all other pages, the HTML tag needs to have a height of 100%. However, if I add this height value t ...

javascriptjqueryhtmlcss

Changing class in jQuery ignores CSS style

I have a id="header" div that initially has css rule: padding: 25px 0;. I want to decrease the padding of this div when scrolling down the page. $(document).ready(function() { var headerID = $("#header"); $(this).scroll(function() { if (!$(this).s ...

jqueryhtmlcss

The spacing between elements in Flexbox is too excessive, creating an overly wide gap

How can I maintain a fixed 40 pixel gap between columns in flexbox without it increasing as the screen width widens? (I apologize for the brevity of this description, but there are no additional details to provide at this time) .browser-box { max-wid ...

htmlcssflexbox

Steps to create a customized on-click effect for the search button

I have created the following: https://i.sstatic.net/Eu9kh.png And I am aiming for this: https://i.sstatic.net/maKCM.png Both search bars have on-click states but I am struggling to achieve this using bootstrap, CSS, JS. Can someone guide me on how to ...

javascripthtmlcssbootstrap-5

Utilizing Nesting in Less-CSS: Unleash the Power of Greater Than Sign

When working with LESS-CSS, you can achieve the same result with the following code: .a { .b { font-color:red; } } or you can use the nested selector directly like this: .a .b { font-color:red; } But is there a way to target only direct child ...

csscss-selectorsless

Disorganized jQuery Animation

Looking for some help with an animation I have on my website. The animation is supposed to smoothly move in and out when the mouse cursor hovers over it, but as you can see, it's a bit messy. This project involves HTML, CSS, and jQuery <!DOCTYPE ...

jquerycsshtmlanimation

What is the best way to manage horizontal scrolling using buttons?

I was hoping that when the button is clicked, the scroll would move in the direction of the click while holding down the button. Initially, it worked flawlessly, but suddenly it stopped functioning. export default function initCarousel() { const carous ...

javascripthtmlcss

Is there a way to arrange the navigation items to appear on the right side upon toggler click?

I've been trying to get the nav-items to align on the right side, but so far using the ms-auto class from Bootstrap isn't giving me the desired result. <html lang="en"> <head> <!-- Required meta tags --> < ...

htmlcssbootstrap-5

Setting the size of a box using CSS in HTML pages

I am facing issues with resizing boxes. Below is the code snippet: <!DOCTYPE html> <html lang="en"> <head> <style> .wrapper { text-align: center; } #bubble { display: inline; -moz ...

htmlcss

Tips for organizing a Bootstrap 4 menu overflowing with elements

I'm struggling to figure out how to organize a Bootstrap 4 menu with numerous links. Currently, when I include too many links, the navbar disregards the container and expands its width beyond the container. Here is an image for better clarification: ...

cssnavbarbootstrap-4