Form Options for Donations with Gravity Forms

I'm currently working on designing a donation form for a nonprofit organization. The form can be found at . One of the challenges I am facing is styling the radio buttons to appear like regular buttons using CSS. However, I have encountered an issue where other elements are getting aligned next to the option buttons. Additionally, I am looking to make the buttons responsive in order to match the site's overall design. Below is the custom CSS code I have implemented for the radio buttons: 

input[type=radio] {
display:none;
}

input[type=radio] + label {
border: none;
float: left;
position:relative;
margin-left: 0.2em;
background-color: #BCD676;
border-radius: 0px;
color: #fff;
text-decoration: none;
letter-spacing: 1px;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
vertical-align: top;
padding: 1em 2.0em;
}

Thank you!

htmlcssformsradio-buttongravity

Answer №1

Removing float: left; in the radio css code will solve the issue

Next, include display: inline-block; for the elements 

body .gform_wrapper form .gform_body ul, body .gform_wrapper form .gform_body ul li

However, the email and subscription options are also displayed in line, so I recommend using inline-block only for specific items like donation amount, credit card payment, and paypal. For privacy information, consider styling it to prevent stretching

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

jQuery - Is there a way to dynamically generate an element based on user input during an iteration?

My current challenge involves creating 5 unique audio players using a specific code snippet that can be called individually throughout the HTML document. You can find the original code here: https://codepen.io/katzkode/pen/ZbxYYG The issue I'm facing ...

javascriptjqueryhtmlloops

Create a new file using PHP by submitting a form in HTML

Currently, I am developing a PHP script that is designed to modify a specific file for the user. This script retrieves the contents of the file and places them in a textarea within a form. How can I ensure that any changes made in this textarea are saved b ...

phphtmlformsurl-rewriting

Photo attached at the bottom of each container

Here is the link to my code snippet: fiddle. I am struggling with aligning shopping bag icons at the bottom of each box on my webpage. I want all boxes to have the same height, so I used display: table-cell; in the box_left div. However, placing the shopp ...

htmlcss

Send a collection of list items from the client to a Spring MVC controller

Is it possible to send a dynamically changing list of values to a Spring controller in a submission? I came across a solution on this page, but it only seems to work with input fields since you can't assign a name attribute to the li tag. <ul id=" ...

javahtmlspring-mvc

Transforming hexadecimal color codes into spans

I've been experimenting with regex patterns to transform hexadecimal colors into spans. Take this example: #FF0000Hello#00FF00There <span style="color: #FF0000">Hello</span><span style="color: #00FF00">There</span> ...

phphtml

Using Angular to dynamically append HTML elements in a form with ng-repeat

Hey there, I'm looking to create a dynamic form using Angular. I want the button click on this form to append HTML with ng-repeat functionality. Although the button click has an action, I'm having trouble appending data to ng-repeat. I need to ...

javascriptjqueryhtmlangularjs

What are the risks associated with allowing user-generated HTML or Javascript code on a website?

Is it really dangerous to allow users to edit HTML with Jinja2 templates and access some server-side variables that will be rendered later? I know Google uses Caja Compiler to sanitize and sandbox HTML served from Google Apps Script. Should I be concerned ...

javascripthtmlsecuritysandboxjinja2

Is there a way to reorganize the layout of a container on mobile using this code?

Is it possible to rearrange this code for mobile view? Currently, on desktop, the <div class="grid4-12"> (left) and <div class="grid8-12"> (right) are stacked on top of each other. How can I adjust the code so that on a r ...

htmlcss

Utilizing AJAX and JavaScript to generate a table using the AJAX response and placing it within a <div> element

I am currently passing the response of this action in text form, but I would like to display it in a table format. Is there a way to do this? function loadAditivos(){ $('#aditivoAbertoInformacoesTexto').html('<div id="loaderMaior ...

javascripthtmljsonajax

Locking the second column of a data table with CSS to prevent scrolling

We need to freeze two columns in our data table - "PPD Delivery Schedule" and "Check Opex". The first column is working fine, but we're having issues freezing the second column. We've tried various approaches but haven't been successful so ...

csshtml-tablevisualforce

Why is it that the LESS compiler fails to recognize classes that are created by a zero iterator

When working with my CSS sheet, I found that I needed to reset some Bootstrap 3 preset values in order to achieve my desired style. To do this, I started using utility classes like .m-b-0 which sets margin-bottom:0px. However, I encountered an issue with ...

csstwitter-bootstrapless

Utilizing Ajax to redirect users

Just finished creating a test Ajax call function in my script to add a basic layer of protection to my website. Here is the code: function testPHP() { $.ajax({ type: 'post', url: 'file.php', success: function() { al ...

javascriptphpjqueryhtml

Verify the availability of internet connection in Office task pane applications

I have developed an office app task pane that requires internet connectivity to function properly. To prevent the app from crashing, I need to implement a check to verify if the device is connected to the internet. While I have looked at similar inquiries ...

javascripthtmlvisual-studio-2012office-app

The alignment of the list is off when using Flexbox on smaller screens

When my flexbox shifts into a column layout at 600 pixels, the list in the second box loses its center alignment on smaller screens. Despite trying various margin and padding adjustments within and outside of media queries, the content remains too far to t ...

htmlcssflexboxbootstrap-4twitter-bootstrap-4

How can I enhance the appearance of my custom field using CSS in Advanced Custom Fields?

Utilizing the Wordpress Advanced custom field plugin, I have successfully added a custom field to my site. Within this custom field, I have inserted images and now I am looking to center them on my page using CSS styles such as margin: 0 auto. If you&apo ...

csswordpressadvanced-custom-fields

Using CSS/HTML to showcase rows in a vertical table format (or similar)

Can someone please help me with formatting my tabular data in a specific way? column A | column B | column C | column D | ------------------------------------------- 1-1 | 2-1 | 3-1 | 4-1 | ------------------------------------------- 1 ...

htmlcss

The hover effect does not function on an SVG element when it is placed within an external file

I've been experimenting with SVG animation. My goal is to change the color of a circle when it's hovered over. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 437 ...

csssvgsvg-animate

Unusual transparency effect in flip panel with varying CSS transition speed during hover?

I need help with flipping over div elements on hover. I have a few questions: How can I adjust the flip speed for when the user is no longer hovering? I was able to change the flip speed to 0.5s duration on hover, but how do I control the off-hover spe ...

htmlcssanimationflip

Choose the desired options to add to the selection box

Here is a question that I have: <select class="myselect"> <option value="option 1">option 1</option> <option value="option 2">option 2</option> <option value="option 3">option 3</option> <option value="option 4 ...

jqueryhtmlselect

Design a Bootstrap dropdown menu featuring various options within an icon container

I have designed a blade with a signboard containing multiple columns, each displaying its name, color, and assigned cards (screenshot). To enable sorting of these cards, I added an icon next to each column title. My goal is to allow users to select sorting ...

htmljquerycssbootstrap-4