I'm facing overall spacing and alignment issues. Whichever template I used, I encountered the same issue.
Let's discuss your 3rd template, with an issue I'm facing.
As you can see your 3rd template, but I'm applied the same one, I was getting space issues on Desktop + Mobile as well, Profile image is out of alignment in the Desktop view, plus there is too much between the Profile image and the User name,,,, you can compare this with your template.
Same as, in mobile everything is merged, out of spacing, no profile image.
Please view the attached images of your 3rd template, plus my mobile + desktop screenshots.
Here is the website link https://soulknightapk.com/ to get reviewed.
Desktop Issue... Out of Alignment + spacing between profile and username...
Same issue in Mobile View
Hi,
Please use this CSS code:
#wpdcom .wpd-comment .wpd-avatar img.avatar {
position: static !important;
}
Insert the code in the "Custom CSS code" textarea, located in the Dashboard > wpDiscuz > Settings > Styles & Colors admin page.
Also, please try in 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.
Don't forget to delete the caches before checking.
Wow, it gets resolved! Thank You.
I want to modify 2-3 options as well, can you please help me out in this regard?
@asti Please let me know how to Increase the Height of the "Comment Typing Field Section"
Second I want to Increase the size of
- Profile Image
- Comment Typing + Comment Font
- Username Font
The CSS codes are provided below:
Please let me know how to Increase the Height of the "Comment Typing Field Section"
#wpdcom .ql-container {
height: 150px;
}
Profile Image:
#wpdcom .wpd-comment .wpd-avatar img, #wpdcom .wpd-comment .wpd-avatar img.avatar{
height: 65px !important;
width: 65px !important;
max-width: 65px !important;
}
Username Font :
#wpdcom .wpd-comment-header .wpd-comment-author{
font-size: 19px;
}
Comment Typing + Comment Font:
#wpdcom .wpd-comment-text{
font-size: 18px;
}
#wpdcom .ql-editor > *{
font-size: 18px;
}
The red-marked values can be changed as you like.
This FAQ should help you to make further customizations yourself: https://wpdiscuz.com/community/f-a-q/how-to-customize-the-wpdiscuz-wordpress-plugin-styles/#post-20534
@asti after applying the change now having one issue, the profile image and username are overlapping. See the below image.
Dear @chrismartin,
We don't recommend making design changes if you're not familiar with CSS code.
If you want to customize the elements, you should find the values (red-marked ones in the code) for the CSS properties that will not damage the design.
In this case, we recommend using CSS @media rules. More info here: https://www.w3schools.com/cssref/css3_pr_mediaquery.php
