Comment aerea full ...
 
Share:
Notifications
Clear all

Comment aerea full width

9 Posts
2 Users
0 Likes
725 Views
Posts: 24
Topic starter
(@seatsfordeparture)
Eminent Member
Joined: 4 years ago

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%;

Untitled

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
8 Replies
Asti
Posts: 7056
 Asti
Support
(@asti)
Illustrious Member
Joined: 6 years ago

Hi @seatsfordeparture,

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

Reply
7 Replies
(@seatsfordeparture)
Joined: 4 years ago

Eminent Member
Posts: 24

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?

Reply
Asti
 Asti
Support
(@asti)
Joined: 6 years ago

Illustrious Member
Posts: 7056

@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. 

 
Reply
(@seatsfordeparture)
Joined: 4 years ago

Eminent Member
Posts: 24

@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?

Reply
Asti
 Asti
Support
(@asti)
Joined: 6 years ago

Illustrious Member
Posts: 7056

@seatsfordeparture,

Use this CSS code as well:

div#wpdcom {
max-width: 100% !important;
}
Reply
(@seatsfordeparture)
Joined: 4 years ago

Eminent Member
Posts: 24

@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 b**t)

Untitled2

 

Reply
Asti
 Asti
Support
(@asti)
Joined: 6 years ago

Illustrious Member
Posts: 7056

@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.

Reply
(@seatsfordeparture)
Joined: 4 years ago

Eminent Member
Posts: 24

@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... 🙁 

Reply
Share: