Notifications

Clear all

Conflict [Solved] Spacing and Alignment Issue in Desktop & Mobile View

How-to and Troubleshooting

Last Post by Asti 1 year ago

11 Posts

2 Users

1 Reactions

874 Views

RSS

Posts: 7

ChrisMartin

Topic starter

Jul 06, 2024 8:49 am

(@chrismartin)

Active Member

Joined: 1 year ago

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.

This topic was modified 1 year ago by ChrisMartin

10 Replies

Posts: 7

ChrisMartin

Topic starter

Jul 06, 2024 8:52 am

(@chrismartin)

Active Member

Joined: 1 year ago

Posts: 7

ChrisMartin

Topic starter

Jul 06, 2024 8:54 am

(@chrismartin)

Active Member

Joined: 1 year ago

Desktop Issue... Out of Alignment + spacing between profile and username...

Posts: 7

ChrisMartin

Topic starter

Jul 06, 2024 8:54 am

(@chrismartin)

Active Member

Joined: 1 year ago

Same issue in Mobile View

Posts: 8195

Asti

Support

Jul 06, 2024 8:56 am

(@asti)

Illustrious Member

Joined: 8 years ago

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.

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.

Posts: 7

ChrisMartin

Topic starter

Jul 06, 2024 9:05 am

(@chrismartin)

Active Member

Joined: 1 year ago

Wow, it gets resolved! Thank You.

I want to modify 2-3 options as well, can you please help me out in this regard?

5 Replies

Asti

Support

(@asti)

Joined: 8 years ago

Illustrious Member

Posts: 8195

Jul 06, 2024 9:10 am

Reply to

ChrisMartin

@chrismartin

Please let us know what you'd like to change.

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.

ChrisMartin

(@chrismartin)

Joined: 1 year ago

Active Member

Posts: 7

Jul 06, 2024 9:36 am

Reply to

Asti

@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

Asti

Support

(@asti)

Joined: 8 years ago

Illustrious Member

Posts: 8195

Jul 06, 2024 10:14 am

Reply to

ChrisMartin

@chrismartin

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

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.

ChrisMartin

(@chrismartin)

Joined: 1 year ago

Active Member

Posts: 7

Jul 06, 2024 12:04 pm

Reply to

Asti

@asti after applying the change now having one issue, the profile image and username are overlapping. See the below image.

Asti

Support

(@asti)

Joined: 8 years ago

Illustrious Member

Posts: 8195

Jul 08, 2024 10:01 am

Reply to

ChrisMartin

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

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.