Elements Center Align in Debutify

Shopify Discussion
, ,

Topic summary

A user reports that center alignment for titles and buttons in Debutify theme’s “Image with text” section has stopped working, despite correct settings being applied. The screenshot confirms center alignment is selected in both general and mobile settings, but elements remain left-aligned in the preview.

Likely causes identified:

  • Custom CSS overrides conflicting with theme settings
  • Outdated or buggy section file with broken alignment logic
  • JavaScript conflicts or lazy rendering issues

Proposed solutions:

  1. Add custom CSS targeting .image-with-text containers with !important declarations for text-align and margin properties
  2. Inspect image-with-text.liquid section file to verify alignment logic is correctly applying dynamic classes
  3. Test alignment on live storefront (not just theme editor preview) to rule out rendering glitches

Multiple responders requested the store URL to investigate further. The issue remains unresolved pending additional troubleshooting.

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

Hello everyone. For some reason, in my Debutify theme, at Image with text section where I can add a CTA button, if I set the alignment to center for title and button, it does not work anymore. It worked before, but now is just not doing anything. You can see in the picture the settings are correct, but the alignment is not. Do you have any solution? Thank you for your help

Screenshot 2025-05-03 at 08.25.49.png
Screenshot 2025-05-03 at 08.25.49.png2879Ă—1493 286 KB

3 Likes
2

HEY @Yosemite98 share the URLs of your website plz

3

Hey @Yosemite98

Share your store URL and Password if enabled.

Best Regards,

Moeed

4

Hello @Yosemite98 Thanks for sharing the screenshot. From what you described and what the image shows, it looks like the alignment settings (both general and mobile-specific) are set to Center, but the button is still aligned left in the frontend preview. This issue often happens when:

Common Causes and Fixes:

  1. Custom CSS Overrides (most likely)
    There might be a custom CSS rule overriding the theme settings. Inspect the button using your browser’s developer tools and check for text-align, justify-content, or margin properties applied at the container or button level.

Fix:
Add this CSS to your theme (under Theme settings > Custom CSS, or Assets/theme.css or custom.css):

.image-with-text .image-with-text__content {
  text-align: center !important;
}

.image-with-text .button {
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}
  1. Outdated or Buggy Section File
    If the theme was recently updated or customized, it’s possible that the image-with-text.liquid or the equivalent section file has broken logic for alignment.

Fix:
Open Sections/image-with-text.liquid (or whatever Debutify names this block) and check if the alignment logic is correctly applying dynamic classes like text-center or flex utilities.

Look for something like:

{% if block.settings.alignment == 'center' %}
  text-align: center;
{% endif %}

Make sure it’s not missing or being overridden by hardcoded alignment.

  1. JavaScript Conflicts or Lazy Rendering
    Sometimes, app scripts or deferred rendering messes with layout positioning after the DOM loads.

Quick test:
Try setting the alignment, saving, and refreshing the page outside the theme editor preview (i.e., on the live storefront) to confirm it’s not just a preview glitch.

Thank you :blush: