Hello colorlib.
Once again, I would like to say good work with awesome illdy theme.
This time, I would like to ask question about the contact form. After I installed the plugin and used “default contact form instance”, everything was fine and smooth. However, after deleting the default instance and creating new one in my language, the text area automatically resized (as shown in the figure below). Object width is still set to 100 %, but block borders were somehow changed.
Is there a possibility to adjust width of the text area while keeping the page responsible?
Thanks for the help 
Hello,
Once again, thank you for the interest in our themes and for the kind words.
There is some strange behaviour for the textarea box, but I managed to find a fix:
label {
display: block;
}
You could add !important to it if it’s not working on the first try.
Let me know if it did the trick!
Hi, thanks for the code!
After using it, the block width was restored and the text area of contact form was returned to its previous state. However, I personally find it too wide for bigger screen resolutions. I’ve noticed, that page layout is changing from 1009px to 1010px window width, so I wanted to adjust textarea width for this particular resolutions so that text area will have same width as the end of 2nd address field (output is shown in the picture).
I wasn’t entirely sure how to achieve this, so I recycled some code from your previous answers about responsive menu couple months ago and tuned it a bit:
@media only screen and (min-width: 1010px){
#contact-us .section-content .wpcf7-form p .wpcf7-textarea {
width: 65.1%;
}
}
@media only screen and (min-width: 1218px){
#contact-us .section-content .wpcf7-form p .wpcf7-textarea {
width: 65.4%;
}
}
After using the code, textarea width was adjusted as I wanted, however for some expected resolutions, the code wasn’t applied. For example, I expected first code to be applied FROM resolution 1010px to 1218px , but 1010px-1027px have still textarea width of 100 % instead of 65,1. Also, second part of the code is then applied to 1028px to 1235 px.
Can you please describe how this should work or how I should make responsible part of the page?
I also encountered similar problems when I tried enhance responsibility of Team section (because I think there are some bugs even in the original illdy release - team responsibility looks awful in certain resolutions.)
So can you please try to explain how can I make dynamic changes to the website according to user’s machine resolution? I really do miss some if-else conditions 
Thanks
Hello,
This gets a little over my head as it seems like a lot of custom modifications that simply falls short to the free support scope. I would love if you can provide any visuals for the mobile layout malfunctions so we can look to improve the mobile display.
Long story short, your if else statement are the CSS’s media queries.
Just have a look here and let me know if you got it fixed.
Regards
Thanks for the info, seems like I was using those queries before even knowing what’s going on But thanks for the share anyway, I have no knowledge about HTML, CSS, PHP & other stuff, but now I atleast know something about CSS queries
But now, back to my problem. I was using those queries as written above but to some expected resolutions, the code wasn’t applied. I thought it may be bug in your theme, but the problem was on my side. I was using some plugin for Chrome which was supposed to tell me the window width, however it wasn’t working properly. Then I tried Mozilla’s Responsive Design mode and used resolutions from there. The page is now working properly and codes are applied to expected resolutions.
I got kind of hyped for web-development after making these simple adjustments with CSS codes. I will maybe even take some web-developer course
Thanks for your support and awesome theme, I don’t regret a single second since I decided to work with illdy.
Have a nice day!
Actually, I played a bit with a Team section, which needs a bit adjustments in original illdy release. For some resolutions, the text formatting is just awful, also, when you use longer description of the person, the text is also not formatted even in 1080p. I found a solution using margins. Still, I don’t exactly know if it is the best solution, but it definitely works for me. I’m sharing the code for anyone who would cope with same text formatting problems (example in the pic. below)
@media only screen and (max-width: 368px){
#team .section-content .person .person-content {
margin-left: 0px;
margin-top: 140px;
}
}
@media only screen and (min-width: 369px) and (max-width: 459px){
#team .section-content .person .person-content h5 {
margin-bottom: 70px;
}
}
@media only screen and (min-width: 460px) and (max-width: 767px){
#team .section-content .person .person-content {
margin-left: 150px;
margin-top: 0px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1011px){
#team .section-content .person .person-content {
margin-left: 0px;
margin-top: 130px;
}
}
@media only screen and (min-width: 1012px){
#team .section-content .person .person-content {
margin-left: 150px;
margin-top: 0px;
}
}
Have a great day!
Hello @pa3kson,
That’s really great news and I’m really happy that you got so far with the setup and also that you find the web development so exciting, welcome to the team
Also, thank you for sharing the solution for the members description.
I believe that it is actually displaying alright now, as if you have a very long description it should wrap around the widget photo rather than making a very long right column.
Some other solution would be to just add some spacing under the picture so the text won’t fall below it:
#team .section-content .person .person-image {
margin-bottom: 150px;
}
Cheers