AI Search

Classic Search

Search Phrase:

Search Type:

Advanced search options

Search in Forums:

Search in date period:

Sort Search Results by:

AI Assistant

Notifications

Clear all

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

✦ Summarize Topic

How-to and Troubleshooting

Last Post by Asti 2 years ago

11 Posts

2 Users

1 Reactions

905 Views

RSS

Posts: 7

ChrisMartin

Topic starter

Translate ▼

Jul 06, 2024 12:49 pm

(@chrismartin)

Active Member

Joined: 2 years ago

[#8633]

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 2 years ago by ChrisMartin

Topic Tags

10 Replies

Posts: 7

ChrisMartin

Topic starter

Translate ▼

Jul 06, 2024 12:52 pm

(@chrismartin)

Active Member

Joined: 2 years ago

Posts: 7

ChrisMartin

Topic starter

Translate ▼

Jul 06, 2024 12:54 pm

(@chrismartin)

Active Member

Joined: 2 years ago

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

Posts: 7

ChrisMartin

Topic starter

Translate ▼

Jul 06, 2024 12:54 pm

(@chrismartin)

Active Member

Joined: 2 years ago

Same issue in Mobile View

Posts: 8208

Asti

Support

Translate ▼

Jul 06, 2024 12:56 pm

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

Translate ▼

Jul 06, 2024 1:05 pm

(@chrismartin)

Active Member

Joined: 2 years 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: 8208

Jul 06, 2024 1:10 pm

Reply to

ChrisMartin

Translate ▼

@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: 2 years ago

Active Member

Posts: 7

Jul 06, 2024 1:36 pm

Reply to

Asti

Translate ▼

@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: 8208

Jul 06, 2024 2:14 pm

Reply to

ChrisMartin

Translate ▼

@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: 2 years ago

Active Member

Posts: 7

Jul 06, 2024 4:04 pm

Reply to

Asti

Translate ▼

@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: 8208

Jul 08, 2024 2:01 pm

Reply to

ChrisMartin

Translate ▼

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.