Layout displaying incorrectly on larger mobiles

Hi there,

Thank you for contacting us.

It sounds like your website’s layout issue on larger phone screens could be related to recent changes in screen resolutions and aspect ratios, or potentially an update to your theme Here are a few steps you can take to diagnose and resolve this problem:

1. Check CSS Media Queries:
   • Review your CSS media queries to ensure they accommodate larger screen widths.
   • Make sure your breakpoints cover wider widths such as 400px, 450px, and above.
2. Inspect Specific Elements:
   • Use the browser’s inspect tool on the problematic devices and look at the elements that are not displaying correctly.
   • Check for any fixed widths or heights, and ensure elements are using relative units (like percentages, em, or rem) instead of absolute units (like px).
3. Update Elementor and Theme:
   • Ensure that both Elementor and the Pinnacle theme are up to date. Updates often fix bugs and improve compatibility with newer devices.
4. Responsive Design Testing:
   • Use online tools like BrowserStack, Responsinator, or the responsive design mode in browser dev tools to test your site at various widths and device types.
   • Pay special attention to the specific screen widths of Samsung S20 Ultra, Samsung A51/A71, and iPhone 14 Pro Max.

Steps to Fix the Issue

1. Adjust Media Queries:
   • Add or modify media queries to better handle larger screens. For example:@media (min-width: 390px) and (max-width: 450px) { /* Adjust styles for wider screens */ } @media (min-width: 450px) { /* Styles for even wider screens */ }
2. Flexible Layouts:
   • Use CSS Flexbox or Grid to create flexible layouts that adapt better to different screen sizes.
   • Avoid using fixed dimensions. Instead, use max-width, flex, or grid-template-columns to allow elements to resize naturally
3. Custom CSS in Elementor:
   • Add custom CSS in Elementor for specific breakpoints if necessary. This can be done in the Advanced tab of the Elementor settings for each section or widget.
4. Review and Test:
   • After making adjustments, review your changes on the specific devices or use emulators to ensure the issue is resolved..
5. Browser Testing:
   • Regularly test your changes using browser developer tools and on actual devices if possible.

By following these steps, you should be able to identify the root cause of the layout issues and adjust your CSS and Elementor settings to ensure your website displays correctly on larger mobile screens.

Kind regards,