Mobile comment runs off

Pinbin
1

Hi,

It’s first time to come here. First, thank you very much for this beautiful template.

Comment area does not seem responsive. When I check my post with my phone (5.1"), comment area run off the page.

In style.css, I’ve changed the following parameters in “@media only screen and (max-width: 480px)” but it didn’t work. Could you please advise to fix it? My blog is here. Thanks!

#comment {
width: 97%;
}
#comment-form {
width: 285px;
}
.comments-area li {
width: 290px;
clear: both;
padding: 0px;
}

2

Hi @goemon,

I hope you are well today and thank you for your question.

I visited your shared site and the comment area is displaying responsive for me as shown in the attached screenshot.

Could you please share me the screenshot of the issue so that i can troubleshoot it?

You can also test it using https://www.responsinator.com/

Kind Regards,
Movin

3

Hi Movin,

Thank you for your support.

Well your screnshot is exactly what I’m seeing now.
The problems are:

  • Comments from visitors cannot be automatically wrapped. So some text is hidden.
  • The comment area size (rectangular frame) cannot be adjusted based on screen size like the attached screenshot.

This happens both when I see it with my mobile (android 6.0, 5.1") and when I shrink Chrome browser.
Also, this could happen on any mobile with small screen according to the website that you mentioned.

Best Regards,
Satoshi

4

To resolve that issue you can try using following custom CSS code using this plugin Simple Custom CSS – WordPress plugin | WordPress.org



@media only screen and (max-width: 480px){
  #comment-form,
  #wrap .comments-area li{
    margin: 0;
    max-width: 100%;
  }
   #commentform input[type=text],  
   #commentform input[type=password], 
   #commentform textarea{
    clear: both;
    display: block;
  }
textarea#comment {
    max-width: 90%;
}
}
5

Hi Movin,

Great! It works perfectly :slight_smile:

Thank you very much!!

6

You are most welcome here :slight_smile:

7

HI. I had the same problem. But already fixed it.

8

@pegglind Awesome great to see you got that fixed.

Please advise if you have more questions by creating separate topic.

Have a fantastic day!

9

wow its work perfectly
thanks dear to solve my problem

10

Hi there.

Thanks for sharing your experience @mobilez :wink:

Regards.