Ninja forms styling for input fields - Which is the right CSS to use?

[celebrian]

Hello! I’m using Ninja Forms with this layout and styling addon, which should make things easier for me when it comes to CSS but I’m still having problems.

For my element (i.e the input field), I would like to set the width to 50% or 50vw in desktops and tablets and on mobile phones, the width is 90% or 90vw. Based on this, I used the following naming and CSS but it’s obviously wrong since it’s not giving me the effect I wanted:

The reason why I use the name “lastname” is because I named the element “lastname”, due to the limitations of new members, I can only upload one screenshot so hopefully, you guys can understand what I’m saying.

Would greatly appreciate some advice please, thank you very much!!

[SalimDev]

you should media queries to do this and here are the most used breakpoints

• (for phones - screens less than 768px wide)
• (for tablets - screens equal to or greater than 768px wide)
• (for small laptops - screens equal to or greater than 992px wide)
• (for laptops and desktops - screens equal to or greater than 1200px wide)

[celebrian]

Hi Salim! Thanks for your help but what should the code be? Is it like this:

@media only screen and (max-width: 768px) {
/* For mobile phones: */
.lastname {
width: 90vw;
}

@media screen and (min-width: 768px) {
/* tablets: */
.lastname {
width: 75vw;
}

@media screen and (min-width: 992px) {
/* desktops: */
.lastname {
width: 50vw;
}

And do I use .lastname to call it? Or do I use something else?

[SalimDev]

Yes put this media queries in your css file and it will work automatically.

To make the right side of your page become under the left side there many ways to do it like:
-make the parent’s style of your pages flexible

display: flex;
flex-wrap: wrap;

[celebrian]

Thanks a lot for your help, Salim! I really appreciate it but somehow, it doesn’t seemed to work? I have attached a screenshot of the inspect element for your reference. Perhaps it will be useful in diagnosing the problem

[celebrian]

And here’s a screencast to show you how the settings are made:
loom(dot)com(slash)share(slash)89b40de32c7e461492098f75dc82a474
(Sorry, my member privileges are not enough for me to share links yet)

The “element” is the field input portion that I’m trying to use CSS on. I tried naming it “lastname” under the element field (which is supposed to “add an extra class to your field element”). Then I use the following:

@media only screen and (max-width: 768px) {
/* For mobile phones: */
.lastname {
width: 90vw;
}

@media screen and (min-width: 768px) {
/* tablets: */
.lastname {
width: 75vw;
}

@media screen and (min-width: 992px) {
/* desktops: */
.lastname {
width: 50vw;
}

It didn’t work. Then I tried doing this:

@media only screen and (max-width: 768px) {
/* For mobile phones: */
#lastname {
width: 90vw;
}

@media screen and (min-width: 768px) {
/* tablets: */
#lastname {
width: 75vw;
}

@media screen and (min-width: 992px) {
/* desktops: */
#lastname {
width: 50vw;
}

It didn’t work too. Then after inspecting element, I tried this:

@media only screen and (max-width: 768px) {
/* For mobile phones: */
input#nf-field-19.ninja-forms-field.nf-element {
width: 90vw;
}

@media screen and (min-width: 768px) {
/* tablets: */
input#nf-field-19.ninja-forms-field.nf-element {
width: 75vw;
}

@media screen and (min-width: 992px) {
/* desktops: */
input#nf-field-19.ninja-forms-field.nf-element {
width: 50vw;
}

and this:

@media only screen and (max-width: 768px) {
/* For mobile phones: */
#nf-field-19.ninja-forms-field.nf-element {
width: 90vw;
}

@media screen and (min-width: 768px) {
/* tablets: */
#nf-field-19.ninja-forms-field.nf-element {
width: 75vw;
}

@media screen and (min-width: 992px) {
/* desktops: */
#nf-field-19.ninja-forms-field.nf-element {
width: 50vw;
}

All the above didn’t work…

[SalimDev]

Try now, may be you can send the link of your project

[celebrian]

Sure! Which link should I send? The link to the page where the form is on?

I just tried sending the link to you but I’m still barred from doing so >.<

[bestdesign]

Source code for sure or a jsfiddle.

[Roma]

You can paste you link like so…
codepen io/celebrian/pen/xyZTe

so leave off the protocol, leave out the period and just put in a space

[SalimDev]

@Roma

codepen io/celebrian/pen/xyZTe

do you mean this
https://codepen.io/celebrian/pen/xyZTe (not found)

[bestdesign]

Yeah not found lol is so ummmm…

[celebrian]

When I try to insert a link in my replies, I get an error message like this:

[SalimDev]

yes you need some time to get this option.
send me a screen shot for the adress link of your project (I’ll retype it)

Also save your project

[celebrian]

thank you so much! here’s the page link:

[SalimDev]

This link is not for codepen.io and also it’s not working

[celebrian]

ohmygosh!! i’m so sorry!! i think i’m mistaken about something. when i said the code wasn’t working, i meant that it’s not working when I insert it into my own website. i.e, when I add the code to the settings in ninja form (as seen in my initial screenshots), not codepen

cos i think there’s an issue with how the selector is named or something and that’s what I’ve been trying to figure out after you’ve kindly taught me about the different breakpoints.

So, now that I know I have to insert a code like this:

@media only screen and (max-width: 768px) {
/* For mobile phones: */
.lastname {
width: 90vw;
}

@media screen and (min-width: 768px) {
/* tablets: */
.lastname {
width: 75vw;
}

@media screen and (min-width: 992px) {
/* desktops: */
.lastname {
width: 50vw;
}

But my question is, what do I type instead of “.lastname”? Cos “.lastname” is definitely wrong since the changes I wanted were not made after I entered this CSS code into my CSS settings.

[celebrian]

This is what I’m trying to achieve:

[SalimDev]

Oh, it’s my mistake because I thought that you’ve the source code of your form to modify it.

I’m sorry I can’t help you because I’m not expert in ninja forms

[Roma]

I made something up to show him how he could put in a link to his code