Title: UI Alignment
Last modified: January 11, 2024

---

# UI Alignment

 *  Resolved [sanumolu5](https://wordpress.org/support/users/sanumolu5/)
 * (@sanumolu5)
 * [2 years, 4 months ago](https://wordpress.org/support/topic/ui-alignment/)
 * Hi,
 * I would like to align “Show details” with the corresponding rewards. Please refer
   to the attached image. How can I accomplish this?
 * [https://drive.google.com/file/d/1WO1rQehj0xKfceo-9h4X4vMKeV9Vn921/view?usp=sharing](https://drive.google.com/file/d/1WO1rQehj0xKfceo-9h4X4vMKeV9Vn921/view?usp=sharing)
 * The inspect code shows the following css. What can I do to modify it so that “
   Show details” comes in line with it’s corresponding badge title, and still show
   it’s content below the badge when clicked on “show details”.
 *     ```wp-block-code
       <div class="gamipress-achievement-description">
   
                           <h2 class="gamipress-achievement-title">
   
                                           <a href="https://staging66.courses.jkyog.org/badges/elite/" title="Elite">Elite</a>
   
                   </h2>
   
   
   
   
   
   
   
                           <div class="gamipress-achievement-excerpt">
                                   </div><!-- .gamipress-achievement-excerpt -->
   
   
   
   
   
   
   
                           <div class="gamipress-achievement-attached">
   
   
                           <div id="show-more-30272" class="gamipress-open-close-switch">
                               <a class="show-hide-open" data-achievement-id="30272" data-action="open" data-open-text="Show Details" data-close-text="Hide Details" href="#">Show Details</a>
                           </div>
   
                           <div id="gamipress-toggle-more-window-30272" class="gamipress-extras-window" style="display: none;">
                               <h4 class="gamipress-achievement-steps-heading">1 Step</h4><ul class="gamipress-achievement-steps gamipress-required-achievements"><li class="user-has-not-earned">Complete a course 10 times</li></ul><!-- .gamipress-required-achievements -->                    </div><!-- .gamipress-extras-window -->
   
   
                   </div><!-- .gamipress-achievement-attached -->
   
   
   
   
   
   
   
           </div>
       ```
   
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fui-alignment%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Plugin Author [Dioni Sánchez](https://wordpress.org/support/users/dioni00/)
 * (@dioni00)
 * [2 years, 4 months ago](https://wordpress.org/support/topic/ui-alignment/#post-17334682)
 * Hi [@sanumolu5](https://wordpress.org/support/users/sanumolu5/),
 * In this case, the ideal would be to create a new template to obtain a result 
   closer to the structure you want to achieve. In the following link you have more
   information on how to manage GamiPress templates.
 * [https://gamipress.com/docs/advanced/template-files/](https://gamipress.com/docs/advanced/template-files/)
 * Best regards.
 *  Thread Starter [sanumolu5](https://wordpress.org/support/users/sanumolu5/)
 * (@sanumolu5)
 * [2 years, 4 months ago](https://wordpress.org/support/topic/ui-alignment/#post-17335385)
 * Hi [@dioni00](https://wordpress.org/support/users/dioni00/),
 * Could you please tell which template should be modified to achieved the desired
   result?
 *  Plugin Author [Dioni Sánchez](https://wordpress.org/support/users/dioni00/)
 * (@dioni00)
 * [2 years, 4 months ago](https://wordpress.org/support/topic/ui-alignment/#post-17335494)
 * Hi [@sanumolu5](https://wordpress.org/support/users/sanumolu5/)
 * In this link to our public GitHub repository you can see the template that corresponds
   to how the achievements are displayed
 * [https://github.com/rubengc/GamiPress/blob/master/templates/achievement.php](https://github.com/rubengc/GamiPress/blob/master/templates/achievement.php)
 * Hope it helps!

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘UI Alignment’ is closed to new replies.

 * ![](https://ps.w.org/gamipress/assets/icon-256x256.png?rev=1699714)
 * [GamiPress - Gamification plugin to reward points, achievements, badges & ranks in WordPress](https://wordpress.org/plugins/gamipress/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/gamipress/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/gamipress/)
 * [Active Topics](https://wordpress.org/support/plugin/gamipress/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/gamipress/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/gamipress/reviews/)

 * 3 replies
 * 2 participants
 * Last reply from: [Dioni Sánchez](https://wordpress.org/support/users/dioni00/)
 * Last activity: [2 years, 4 months ago](https://wordpress.org/support/topic/ui-alignment/#post-17335494)
 * Status: resolved