Why does hover bold function move separators on my webpage?

Store Design
, , , ,

Topic summary

A user is experiencing a layout issue where applying a hover bold effect to category sections on their homepage causes separators to shift position. The bold text appears to expand the element’s dimensions, disrupting the visual alignment.

Current CSS approach:

  • Using font-weight: bold !important on hover for .slide_info-name

Proposed solution:

  • A PageFly support representative suggests adding custom code to the theme.liquid file, specifically above the </head> tag
  • Steps provided: Navigate to Online Stores > Themes > Actions > Edit code > theme.liquid

Status: The issue remains unresolved pending implementation of the suggested fix. The user has shared screenshots demonstrating the separator movement when hovering over elements.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I have a problem with the hover function. I have a plugin on my site thanks to which I added the category sections on the main page as a bar, but when I added the hover bold function in the code, the font gets bold, but the separators also move. It’s as if the bold function expands the individual element (margin, padding?) I don’t know how to explain it. You can see the effect on the home page by hovering the mouse. Is there any way to fix this in the code?

chromemaster.eu

123

.slide_info-name:hover {
    font-weight: bold !important;
  } 

ErnestoF_0-1701766359724.png

ErnestoF_1-1701766368393.png

1 Like
2

Hi @ErnestoF

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Richard | PageFly