AI Assistant

Notifications

Clear all

Comment aerea full width

Summarize Topic

How-to and Troubleshooting

Last Post by SEATSforDEPARTURE 6 years ago

9 Posts

2 Users

0 Reactions

1,889 Views

RSS

Posts: 24

SEATSforDEPARTURE

Topic starter

Translate ▼

May 31, 2020 5:23 pm

(@seatsfordeparture)

Eminent Member

Joined: 6 years ago

[#228]

Hello guys how are you? I am setting up a new website and I tried to align the comment area border with my article ones because it doesn't match. I tried using different css codes found on the internet and I am currently using this one:

#wpdcom {
max-width: 100%;
width: 100%;

But as you can see from the image it still doesn't match the borders... I wanna get rid of that space so bad. Can you help me please? TT_TT

Topic Tags

width

8 Replies

Posts: 8300

Asti

Support

Translate ▼

May 31, 2020 6:54 pm

(@asti)

Illustrious Member

Joined: 8 years ago

Hi @seatsfordeparture,

Please leave some example URL to allow us to check it and provide some CSS solution for you.

In case you want to say thank you! 🙂
We'd really appreciate if you leave a good review on the plugin page.
This is the best way to say thank you to this project and the support team.

7 Replies

SEATSforDEPARTURE

(@seatsfordeparture)

Joined: 6 years ago

Eminent Member

Posts: 24

May 31, 2020 7:12 pm

Reply to

Asti

Translate ▼

hi @asti you can go to my website. It's still under construction but you can see what I am talking about: https://seatsfordeparture.com/

Also there is a lot of padding at the top and at the bottom of the comment area, how can I shrink it, please?

Asti

Support

(@asti)

Joined: 8 years ago

Illustrious Member

Posts: 8300

May 31, 2020 7:24 pm

Reply to

SEATSforDEPARTURE

Translate ▼

@seatsfordeparture,

The issue comes from the active theme. Please watch the video below: https://www.screencast.com/t/O5BSh8Lzxp

However, I've found some CSS code that may be helpful for you. Please navigate to Dashboard > wpDiscuz > Settings > Styles & Colors admin page, put the following CSS code in the "Custom CSS Code" textarea, save it delete all caches and check again.

.separate-containers .comments-area {
    padding: 12px 0 0 0 !important;
}

In case you want to say thank you! 🙂
We'd really appreciate if you leave a good review on the plugin page.
This is the best way to say thank you to this project and the support team.

SEATSforDEPARTURE

(@seatsfordeparture)

Joined: 6 years ago

Eminent Member

Posts: 24

May 31, 2020 7:27 pm

Reply to

Asti

Translate ▼

@asti thank you for your prompt answer. I've just done what you told me and the padding issue is fixed but the width problem is stille there... Any ideas?

Asti

Support

(@asti)

Joined: 8 years ago

Illustrious Member

Posts: 8300

May 31, 2020 7:29 pm

Reply to

SEATSforDEPARTURE

Translate ▼

@seatsfordeparture,

Use this CSS code as well:

div#wpdcom {
   max-width: 100% !important;
}

In case you want to say thank you! 🙂
We'd really appreciate if you leave a good review on the plugin page.
This is the best way to say thank you to this project and the support team.

SEATSforDEPARTURE

(@seatsfordeparture)

Joined: 6 years ago

Eminent Member

Posts: 24

May 31, 2020 7:45 pm

Reply to

Asti

Translate ▼

@asti thank you again you're a star. I've tested it and it works... kinda. The problem now is that the borders disappear completely when I shrink the website for mobile or smaller windows...

As you can see in the picture there is no margin whatsoever in the mobile version:

Any ideas? (sorry to be a pain in the butt)

Asti

Support

(@asti)

Joined: 8 years ago

Illustrious Member

Posts: 8300

May 31, 2020 7:56 pm

Reply to

SEATSforDEPARTURE

Translate ▼

@seatsfordeparture,

this is also a theme issue, however, we provide you the solution to solve teh issue. Just use this code:

@media (max-width: 768px){
   .separate-containers .comments-area {
      padding: 30px !important;
    }
    div#comments {
      padding: 0px !important;
     }
}

Please don't forget to delete all caches before checking.

Also, please try on incognito mode if you're checking on mobile devices. Because mobile browsers have a hard cache, you'll not be able to see the change immediately.

In case you want to say thank you! 🙂
We'd really appreciate if you leave a good review on the plugin page.
This is the best way to say thank you to this project and the support team.

SEATSforDEPARTURE

(@seatsfordeparture)

Joined: 6 years ago

Eminent Member

Posts: 24

May 31, 2020 7:59 pm

Reply to

Asti

Translate ▼

@asti thank you again I've put the code you mentioned and purged the cache and went to incognito mode to test it out but we are right back to the start (like the coldplay song). The mobile version looks perfect, the desktop still has the large padding around the comment area... 🙁