Mobile checkout screen – "notes box"

[wtflovelife]

Hi! I am having a weird issue on mobile with the “order notes” box. You can see in the screenshot that the line breaks. Is there something I can do to fix that?

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

@media only screen and (max-width: 479px) {
.woocommerce form #customer_details .form-row textarea{
padding:0px !important;
font-size:8px !important;
}
}

Thanks
Mohammad

[wtflovelife]

Hi! Thanks for the reply – I cleared my cache and everything and this doesn’t seem to work.

[Mohammad – SUPPORT]

Hi,
Where did you inserted this code? Are you using any cache plugin?
Thanks
Mohammad

[wtflovelife]

I added it to the custom CSS box. I have no caching plugins installed

[Mohammad – SUPPORT]

Hi,
You have this wrong code </style><style> in custom css box that is cause to issue of failure of code.
Thanks
Mohammad

[Rui Guerreiro – SUPPORT]

For me the problem seems to be the margin bottom, just in case try the code below.

@media only screen and (max-device-width: 480px){
.woocommerce form #customer_details .form-row {
  margin-bottom: 15px!important;
}
}

-Rui

[wtflovelife]

Thank you guys! Rui – your code worked!

[Mohammad – SUPPORT]

Hi,
Great thanks to Rui.
Mohammad

[wtflovelife]

Sorry to open this back up but I have another question about this box! Is there a way to remove the two small lines that cause the box to open more when a user drags the corner? On my screen if they drag – it goes off the page! I’d rather it just stay one small size.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.woocommerce form #customer_details .form-row textarea{
resize:none !important;
}

Thanks
Mohammad

[David Martin – Support]

Hi,

Sure, please use this CSS in your theme options:

textarea[name=order_comments] {
    resize: none;
}

Thanks.

[wtflovelife]

Thanks SO much!

[David Martin – Support]

Glad it’s resolved, thanks Mohammad!

– David.