Title: Alignment issue Last modified: August 30, 2016 --- # Alignment issue * Resolved [nazdog61](https://wordpress.org/support/users/nazdog61/) * (@nazdog61) * [10 years, 4 months ago](https://wordpress.org/support/topic/alignment-issue-18/) * Hi, * I can’t seem to get my form to align when I change a user field data size. See code below: Why does the last field overlap with the file uploader? * The description has a custom data size. * [wordpress_file_upload uploadpath=”user-uploads” uploadpatterns=”*.mp4*.avi,*. mov,*.mkv,*3gp,*.avi,*.divx,*.mpeg,*.wmv,*.mpeg4″ maxsize=”500″ dublicatespolicy =”maintain both” redirect=”true” redirectlink=”[http://www.test.com”](http://www.test.com”); placements=”userdata/userdata/title/message/selectbutton/filename/subfolders/ uploadbutton/progressbar” uploadtitle=”Submit Your Video/Photo” selectbutton=” Choose File” uploadbutton=”Upload” notify=”true” notifyrecipients=”test@gmail. com” notifymessage=”A user has upload a win. ” widths=”userdata:600px, userdata_label: 600px, userdata_value:600px” heights=”userdata:100px, userdata_label:200px, userdata_value: 200px” userdata=”true” userdatalabel=”Name:|t:text|s:left|r:1|a:0|p:right|d:/ Email Address:|t:email|s:left|r:1|a:0|v:1|p:right|d:|g:0/Location:|t:text|s:left |r:0|a:0|p:right|d:/Video URL (if applicable)|t:text|s:left|r:0|a:0|p:right|d:/ Description:|t:multitext|s:left|r:0|p:right” userdatalabel2=”Would you like a mention?|t:checkbox|s:left|r:0|a:0|p:right|d:false|l:|f:right”] * [https://wordpress.org/plugins/wp-file-upload/](https://wordpress.org/plugins/wp-file-upload/) Viewing 15 replies - 1 through 15 (of 16 total) 1 [2](https://wordpress.org/support/topic/alignment-issue-18/page/2/?output_format=md) [→](https://wordpress.org/support/topic/alignment-issue-18/page/2/?output_format=md) * Plugin Author [nickboss](https://wordpress.org/support/users/nickboss/) * (@nickboss) * [10 years, 4 months ago](https://wordpress.org/support/topic/alignment-issue-18/#post-6775224) * Hi, * it is a css issue, what is the URL of the page to check? * Nickolas * Thread Starter [nazdog61](https://wordpress.org/support/users/nazdog61/) * (@nazdog61) * [10 years, 3 months ago](https://wordpress.org/support/topic/alignment-issue-18/#post-6775331) * Hi Nickboss * The page is [http://pokiewins.com.au/submit-your-win/](http://pokiewins.com.au/submit-your-win/) * I’m trying to get it to display mobile friendly also. * Plugin Author [nickboss](https://wordpress.org/support/users/nickboss/) * (@nickboss) * [10 years, 3 months ago](https://wordpress.org/support/topic/alignment-issue-18/#post-6775332) * In your page I see in Chrome (desktop) that they are aligned, however the space between them is very large. * What changes do you want? * Nickolas * Thread Starter [nazdog61](https://wordpress.org/support/users/nazdog61/) * (@nazdog61) * [10 years, 3 months ago](https://wordpress.org/support/topic/alignment-issue-18/#post-6775334) * Hi Nickboss. * Thanks for getting back to me. * I want the fields to show properly without overlapping. * I also want it to be semi mobile friendly.. * Thanks * Plugin Author [nickboss](https://wordpress.org/support/users/nickboss/) * (@nickboss) * [10 years, 3 months ago](https://wordpress.org/support/topic/alignment-issue-18/#post-6775335) * In which browser / device do you see them overlapped? * Thread Starter [nazdog61](https://wordpress.org/support/users/nazdog61/) * (@nazdog61) * [10 years, 2 months ago](https://wordpress.org/support/topic/alignment-issue-18/#post-6775346) * Hi Nick, * I would like to them to not be overlapped on any device. They aren’t currently displaying properly on any device. * Cheers * Plugin Author [nickboss](https://wordpress.org/support/users/nickboss/) * (@nickboss) * [10 years, 2 months ago](https://wordpress.org/support/topic/alignment-issue-18/#post-6775347) * In order to avoid overlapping please add the following code in the Custom CSS area of your theme: * label.file_userdata_label { width: 200px; } * Let me know how it looks like. * Thread Starter [nazdog61](https://wordpress.org/support/users/nazdog61/) * (@nazdog61) * [10 years, 2 months ago](https://wordpress.org/support/topic/alignment-issue-18/#post-6775348) * Hi nickboss I’ve added the custom CSS to the Custom styling part of the theme and it still doesn’t appear correctly. Does the code I’ve produced display correctly for you on another theme? * Is the custom css code supposed to be like this: * label.file_userdata_label {width: 200px;} * Plugin Author [nickboss](https://wordpress.org/support/users/nickboss/) * (@nickboss) * [10 years, 2 months ago](https://wordpress.org/support/topic/alignment-issue-18/#post-6775349) * I can see that you entered the css rule correctly, however another rule prevails. * Please modify it as follows: * label.file_userdata_label {width: 200px !important;} * Thread Starter [nazdog61](https://wordpress.org/support/users/nazdog61/) * (@nazdog61) * [10 years, 1 month ago](https://wordpress.org/support/topic/alignment-issue-18/#post-6775350) * That’s great Nickboss it displays as expected on desktop browsers now. Thanks allot. * I’m still having issues with it displaying on Mobile as the text fields don’t display without scrolling right. Do you know if there is anyway to fix that? * Plugin Author [nickboss](https://wordpress.org/support/users/nickboss/) * (@nickboss) * [10 years, 1 month ago](https://wordpress.org/support/topic/alignment-issue-18/#post-6775351) * Hi, please add the following code in your custom css area: * [@media](https://wordpress.org/support/users/media/) (max-width: 480px) { div. file_userdata_container { white-space: normal; } } * this will wrap the edit boxes below their labels for mobile devices, let me know if it works * Nickolas * Thread Starter [nazdog61](https://wordpress.org/support/users/nazdog61/) * (@nazdog61) * [10 years ago](https://wordpress.org/support/topic/alignment-issue-18/#post-6775358) * Hi nickboss, * Thanks for the CSS. It is now closer The text boxes now fit but it takes over the space of the text.It does the same on desktop. * Any ideas? * Plugin Author [nickboss](https://wordpress.org/support/users/nickboss/) * (@nickboss) * [10 years ago](https://wordpress.org/support/topic/alignment-issue-18/#post-6775359) * I do not see the rule * label.file_userdata_label {width: 200px !important;} * have you erased it somehow? * Nickolas * Thread Starter [nazdog61](https://wordpress.org/support/users/nazdog61/) * (@nazdog61) * [10 years ago](https://wordpress.org/support/topic/alignment-issue-18/#post-6775361) * Hi Nikolas. * Sorry I did delete as I thought the new rule you gave me superseded. I’ve now updated. See on mobile it’s still not displaying correctly. * Cheers Nazdog * Plugin Author [nickboss](https://wordpress.org/support/users/nickboss/) * (@nickboss) * [10 years ago](https://wordpress.org/support/topic/alignment-issue-18/#post-6775362) * Hi, you are right, please set the rule as follows: * [@media](https://wordpress.org/support/users/media/) (max-width: 480px) { div. file_userdata_container { white-space: normal !important; } } * just add !important after the normal word. Viewing 15 replies - 1 through 15 (of 16 total) 1 [2](https://wordpress.org/support/topic/alignment-issue-18/page/2/?output_format=md) [→](https://wordpress.org/support/topic/alignment-issue-18/page/2/?output_format=md) The topic ‘Alignment issue’ is closed to new replies. * ![](https://ps.w.org/wp-file-upload/assets/icon-256x256.png?rev=3252590) * [Iptanus File Upload](https://wordpress.org/plugins/wp-file-upload/) * [Frequently Asked Questions](https://wordpress.org/plugins/wp-file-upload/#faq) * [Support Threads](https://wordpress.org/support/plugin/wp-file-upload/) * [Active Topics](https://wordpress.org/support/plugin/wp-file-upload/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/wp-file-upload/unresolved/) * [Reviews](https://wordpress.org/support/plugin/wp-file-upload/reviews/) * 16 replies * 2 participants * Last reply from: [nickboss](https://wordpress.org/support/users/nickboss/) * Last activity: [9 years, 11 months ago](https://wordpress.org/support/topic/alignment-issue-18/page/2/#post-6775368) * Status: resolved