The effects of alcohol on sustanon 250 leucine for – real weight loss & bodybuilding benefits?
Spacing and Alignme...
 
Share:
Notifications
Clear all

Conflict Spacing and Alignment Issue in Desktop & Mobile View

11 Posts
2 Users
0 Reactions
83 Views
Posts: 7
Topic starter
(@chrismartin)
Active Member
Joined: 2 weeks 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.

 

10 Replies
Posts: 7
Topic starter
(@chrismartin)
Active Member
Joined: 2 weeks ago
Apex 1720255187869
Reply
Posts: 7
Topic starter
(@chrismartin)
Active Member
Joined: 2 weeks ago
Desktop Issue

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

Reply
Posts: 7
Topic starter
(@chrismartin)
Active Member
Joined: 2 weeks ago
Apex 1720255379323

Same issue in Mobile View

Reply
Asti
Posts: 7334
 Asti
Support
(@asti)
Illustrious Member
Joined: 7 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.

Reply
Posts: 7
Topic starter
(@chrismartin)
Active Member
Joined: 2 weeks 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?

Reply
5 Replies
Asti
 Asti
Support
(@asti)
Joined: 7 years ago

Illustrious Member
Posts: 7334

@chrismartin 

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

Reply
(@chrismartin)
Joined: 2 weeks ago

Active Member
Posts: 7

@asti Please let me know how to Increase the Height of the "Comment Typing Field Section"

 

Second I want to Increase the size of

  1. Profile Image
  2. Comment Typing + Comment Font
  3. Username Font
Reply
Asti
 Asti
Support
(@asti)
Joined: 7 years ago

Illustrious Member
Posts: 7334

@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

Reply
(@chrismartin)
Joined: 2 weeks ago

Active Member
Posts: 7

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

error
Reply
Asti
 Asti
Support
(@asti)
Joined: 7 years ago

Illustrious Member
Posts: 7334

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

Reply
Share: