Position of button underline ease in on hover - Dawn

Store Design
, , , ,

Topic summary

A user is experiencing an issue with button underline positioning in their Dawn theme. When duplicating a section or theme, the underline animation no longer aligns correctly beneath the button text—it appears misaligned compared to the original.

Attempted Solution:
Another user suggested adding CSS code to the base.css file:

a.button.button--primary {
    justify-content: unset !important;
}

Current Status:
The proposed CSS fix did not resolve the issue. The original poster confirmed they correctly added the code to base.css and saved it, but the underline positioning problem persists.

The discussion remains unresolved with no alternative solutions offered yet. Screenshots were shared showing both the correct positioning and the misaligned duplicate version.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hi! Is anyone able to help me with the positioning of the visible part of my banner button underline?

On my current live theme, it’s positioned as it should be, with the line beginning directly under the button text. When I duplicate this section or duplicate the theme for a draft theme, it is no longer in the correct position, see the images below.

This is how it should be:

Screenshot 2025-03-06 131110.png

This is how it is when I duplicate it:

Screenshot 2025-03-06 135855.png

here is the URL to my theme: https://8zeh90dm6h5cr0e4-27884224571.shopifypreview.com

2

Hi @Element1

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

a.button.button--primary {
    justify-content: unset !important;
}

Result

DaisyVo_0-1741340702183.png
DaisyVo_0-1741340702183.png982×594 675 KB

Best,

DaisyVo

3

Hi! Unfortunately this didn’t work

4

Hi @Element1 Can you share an image of where you add the code?

5

here is the screenshot

Screenshot 2025-03-10 154831.png
Screenshot 2025-03-10 154831.png1914×929 60.8 KB

6

Hi @Element1 you must click “Save” to code work

DaisyVo_0-1741856076846.png
DaisyVo_0-1741856076846.png1803×906 149 KB

7

I already did that haha. I had removed the code since you asked for a screenshot three days after I told you it didn’t work. I just added it back to show you where I had placed it. That code simply doesn’t work, at least not in the base.css file. I’m not totally clueless about code, I know how to find the base.css file and save my changes ?