Label Styling Looks Broken or Misaligned

If the discount label is displaying incorrectly—such as being cut off, overlapping other elements, or misaligned with the page layout—this is typically due to conflicts with your theme’s CSS or the label settings. Here's how to fix it:

Steps to Resolve:

1. Check Label Settings in ByteTag Dashboard:
   Start by reviewing the Label Settings in the ByteTag dashboard. Check the alignment, padding, and font size settings. Sometimes, a simple change in these settings can resolve the misalignment. Use the Live Preview feature to adjust these settings and see how the label looks in real time on both desktop and mobile.
2. Adjust Positioning:
   If the label is still misaligned, consider changing its positioning. In ByteTag’s configuration panel, you can adjust the Position settings to place the label in a different location (e.g., above or below product prices, beside the title, or at the bottom of the page). This can help avoid conflicts with other elements on the page and improve the visual flow.
3. Enable Manual Placement for More Control:
   For a more precise placement, enable Manual Placement in ByteTag’s Advanced Settings. This will provide you with a code snippet that you can paste directly into your theme file, such as cart.liquid or product.liquid. This method ensures that the label appears exactly where you want it on the page, without interference from other elements or styles.
4. Resolve CSS Conflicts:
   If your store has custom CSS, it may be overriding ByteTag’s default styles, causing the label to look broken. Inspect the CSS using your browser’s developer tools to identify any conflicting styles. If needed, modify your theme’s CSS to adjust the label’s styling. If you’re unfamiliar with CSS, you can reach out to ByteTag support for assistance, and we’ll guide you through the process.
5. Check Mobile Responsiveness:
   Labels may appear differently on mobile devices due to the smaller screen size. Use ByteTag’s Mobile Preview feature to check how the label looks on mobile and adjust the font size, padding, or margins specifically for mobile screens.
6. Contact Support for Further Assistance:
   If the label still doesn’t look right, and you're unable to fix the issue through the steps above, reach out to ByteTag’s support team. Share a screenshot of the issue and details about your theme, and we’ll work with you to resolve the visual issue, making sure the label looks great across all devices.
   
   Tip: A common solution is to add extra padding (8-12px) around the label and reduce the font size slightly to ensure it fits neatly within the available space on both mobile and desktop screens.