Issue Aligning Hero Section Heading with Other Section Titles

Hi there,

Thank you for contacting us again.

To maintain consistent alignment of the hero section heading across various screen resolutions and zoom levels, you can try the following strategies:

1. Responsive Typography Settings

Ensure that the heading uses responsive typography in Elementor (or CSS if not using a page builder). In Elementor:

• Open the heading widget.
• Go to the “Typography” settings.
• Set the font size, weight, and line height for each device size (desktop, tablet, mobile) individually to avoid scaling issues.

This ensures the heading will scale according to the screen size rather than keeping one size across all.

2. Viewport Units for Font Sizes

Using viewport-based units (like vw or vh) for the heading’s font size can make it more responsive to screen changes:

• vw (viewport width) adapts the font size based on the width of the viewport.
• vh (viewport height) adapts it based on the height.

This ensures that the heading dynamically scales with the screen size, keeping the alignment consistent.

3. Flexible Padding and Margin Settings

Instead of fixed pixel padding and margins, use percentage-based or relative units like em or rem. This will ensure that the spacing around the heading adjusts proportionally with screen size changes:

This scales the padding relative to the base font size, maintaining better alignment consistency.4.

4.Media Queries for Custom Adjustments You can check our documentation abaout this – https://elementor.com/help/responsive-design-using-containers/

5. Zoom Handling

Zooming in and out in browsers can be tricky, but using vw, vh, or percentages helps mitigate the differences. Test the alignment by zooming in and out and tweaking the values accordingly.

Hope this helps you.

Kind regards,

Thanks i got it now i’m getting one more issue in which when i zoom in and out on web it show a slim line on both side left and right side even i didn’t give any padding or margin. Here is the link https://test.amzos.co/

Hi @welladell,

Could you please provide us with the screen recording showing what’s happening when you zoom in and out on the web browser? You can use tool such as loom.com to record your screen.

Looking forward to your reply.

Kind regards,

Sure here it is Loom link Loom | Free Screen & Video Recording Software | Loom – 23 September 2024

Hi @welladell,

Thank you for providing the screen recording. I understand the issue you’re referring to, and I can replicate it when zooming between 110% and 175%.

This behavior is likely due to how browsers adjust the viewport when zooming, which can sometimes affect the container’s width calculation, even when set to full width.

To address this, try the following steps:

1. Hide Overflow: Set the Overflow property to Hidden for all containers on the page. This will prevent any content from spilling over when zooming.
2. Check Margins and Padding: Ensure that all container margins and padding are explicitly set to 0, not left blank. Leaving these fields blank can cause the theme’s default values to be applied, leading to unwanted spacing. Setting them to 0 ensures no extra space is added.

Let me know if that resolves the issue or if further adjustments are needed!

Kind regards,

Due to inactivity this ticket has been closed!