SIGN UP

How to center the images in a "radio buttons" field

By: Pablo Marco Blanco | Asked: 11/27/2022
Forums › Category: Code Help › How to center the images in a "radio buttons" field
Vote Up 0 Vote Down
Pablo Marco Blanco asked 2 years ago

Good afternoon,   I am trying to center the images in a "radio buttons" field. I would like to center only the radio button fields' images, not all the fields in my form (see the image attached to see the problem, or the link below: https://presupuesto.islasolarweb.com/formulario-v2 You can see that the images are not aligned with the SEND/ENVIAR button. I have tried the code below, but it does not work:

 .with_frm_style .frm_radio .frm_image_option {
   margin: 0 auto;
}  

 

Thank you in advance

Attachments
Captura-de-Pantalla-2022-11-27-a-las-17.30.29.png
3 Answers
Vote Up 0 Vote Down
Best Answer
Rob LeVineRob LeVine Staff answered 2 years ago

The best way to solve all these problems is to use the browser developer tools (go to the web page and hit the F12 button).  Then you can select a specific element and see what its CSS settings are and you can change them yourself to see how that affects the output in real-time.  In this case, if you hit F12 and click any one of the text elements, you'll see its class is frm_text_for_image_inner

Attachments
isla_solar_css_screenshot.png
Pablo Marco Blanco replied 2 years ago

Thanks! I tried with different options, and it finally worked with font_size

Pablo Marco Blanco replied 2 years ago

Thanks! I tried with different options, and it finally worked with font_size

Vote Up 0 Vote Down
Rob LeVineRob LeVine Staff answered 2 years ago

The following will work, however, it may affect other fields on your page, so you might have to change the selectors to be more specific to the elements you're changing.

.frm_form_field.frm_image_options {
    text-align: center;
}

.frm_radio.frm_image_option.frm_image_small {	
    margin-right: auto;
    margin-left: auto;	
}
Vote Up 0 Vote Down
Pablo Marco Blanco answered 2 years ago

Thanks! It worked perfectly.
 
I have one last issue to solve. Now I need to reduce the font size in the text inside the images, so it fits properly (please see image).
 
I tried with.  frm_text_label_for_image
But it did not work. How could I do it?
 
Thank you so much in advance!

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right