<!-- wp:paragraph -->
<p>When you develop or modify your Shopify responsive front-end page, as you put more and more elements in, your CSS file constructs and the content will be more complex.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Don't know when suddenly you maybe find your page does not work well on the mobile because it will make the mobile page has a horizontal scroll. It will be a bad user experience for your mobile users.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>How to fix it? Normally due to some elements' size over the window size, we know this, but how to find the culprit one from your tons of elements. Of course, you can write javascript snippet codes to find anyone which size is over the screen size.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Is there any easy and quick way to find the culprit? the answer is YES.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You can do as below steps:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Step1 - Open your page from your Chrome browser</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Step2 - Right-click on your page , select Inspector from popup menu</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":462,"sizeSlug":"full","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-full"><img src="https://www.mojoin.com/wp-content/uploads/2021/10/mj-inspector.png" alt="" class="wp-image-462"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Step2 - Switch to Mobile view mode<br>click mobile switch button switch to Mobile view mode and select iPhone 6/7/8 plus</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":463,"sizeSlug":"full","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-full"><img src="https://www.mojoin.com/wp-content/uploads/2021/10/in-mobile-view-mode.png" alt="" class="wp-image-463"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock -->
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">* {
    outline: 1px solid #f00 !important;
    opacity: 1 !important;
    visibility: visible !important;
}</pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p>and the culprit appeared</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>refer to :</p>
<!-- /wp:paragraph -->