Woo Review Styling

Support
#1

Hi X,

Can you point me in the right direction as to correct the visual appearance of my Product Reviews? As you can see, it’s miserable to actually fill it out because the entry forms are so small and to the left.

#2

Hello There,

Thanks for writing in!

Please add following CSS to fix the UI issues of reviews form:

textarea, input[type="text"] {
    width: 50%;
    height: 50px;
}

Let us know how it goes.

Thanks.

#3

Hi again,

I added your code, then added “.” to activate (make colorful… I am not a CSS whizz) but nothing changed. See below. Seems like .woocommerce or something woo specific needs to be there?

/Woo Review/
.textarea, .input[.type=“text”] {
width: 50%;
height: 50px;
}
/END OF Woo Review/

thanks!!

#4

Hello There,

Thanks for updating in! The code did not work because you added a dot (.) in it. If you want something more specific, please have it updated and make use of this code instead:

.review textarea, 
.review input[type="text"] {
    width: 50%;
    height: 50px;
}

Hope this helps. Kindly let us know.

#5

Hi X,
This doesn’t seem to do the trick.
With or without the “.” or with the new CSS. Here’s a screenshot of the issue and two css snippets… though I only test adding one in at a time.

thanks for your help!!

#6

Hello There,

The code should have work. The problem is that there is a custom block prior to the given block that is invalid.

Please have your custom css updated and make use of this code:

@media(max-width: 767px){
  .x-subscribe-form fieldset {
    width: 100%;
    float: none;
  }
}


.x-subscribe-form-30972 .submit, .submit {   
  text-shadow: none !important;
}
  
/*Woo Review*/
.review textarea, 
.review input[type="text"] {
    width: 50%;
    height: 50px;
}
/*END OF Woo Review*/

To prevent from having the same issue, missing a curly brace, I would recommend that you indent your custom codes properly.

If you need anything else we can help you with, please let us know.

#7

Thanks for finding this mistake! But were you able to see the review correctly on your end? Over here nothing looks to have changed. See screenshot (I’ve cleared the cache, looked on different browsers, etc.)

#8

Hello There,

If that is the case, please have the code updated and make use of this code instead:

/*Woo Review*/
textarea, 
input[type="text"] {
    min-width: 80%;
    max-width: 100%;
    height: 50px;
}
/*END OF Woo Review*/

You can change the minimum width from 10-100%. http://prntscr.com/g4l1rx

Please let us know how it goes.

#9

Thanks! This did the trick for the text part of the review however the Upload an image and Upload a video are still oddly cut off.

#10

Hi,

Please add this code as well.

.woocommerce #reviews .form-contribution .attachment-type:not(:checked) label.checkbox, 
.woocommerce-page #reviews .form-contribution .attachment-type:not(:checked) label.checkbox {
   min-width: 120px;
}

Hope that helps

#11

thanks so much! Looks perfect now!

#12

Glad we could help.

Cheers!