[bug] Horizontal scrolling on mobile. #2617

eugenekasimov · 2023-05-09T03:46:26Z

PR Summary:

Should be a quick fix for horizontal scrolling issue on mobile while the announcement bar slider has two or more slides.

To reproduce the issue you need to open our demo-store on a real mobile device, the announcement bar has to have at least two slides. Then just try to drag/pull any part of the site to the left or right.

The issue

RPReplay_Final1683580892.MP4

What approach did you take?

Change margin for slider's buttons for tablet and mobile to match page paddings and prevent exceeding width that caused horizontal scrolling effect.

Demo links

Editor

Checklist

Added PR summary for release notes
Requested review from UX (Only for changes that are affecting the experience or perceivable visual details)
Created a ticket for the help.shopify.com documentation team about updates to theme settings. (Internal-only task)
Followed theme code principles
Linted with Theme Check
Tested on mobile
Tested on multiple browsers
Tested for accessibility

metamoni

I tested this on my mobile and it looks like the issue has been fixed. I haven't noticed any unintentional side-effects either, so this looks good to me 👍

RPReplay_Final1683618155.MP4

ludoboludo · 2023-05-09T16:17:33Z

assets/base.css

@@ -2110,6 +2110,7 @@ product-info .loading-overlay:not(.hidden) ~ *,
 /* utility-bar */
 .utility-bar {
  height: 100%;
+  overflow-x: hidden;


I wonder if this is the best way to go about it. I think there is a also another way for mobile to deal with it 🤔 Here we might create this fix when maybe we should revisit our spacing approach ?

We're using negative margin, -1.6rem, for the slider buttons that isn't matching the mobile padding 1.5rem.

I think this could be a more logical fix 🤔 If in fact it does also solve our issue.

Thanks Ludo, I think it's more logical and right solution from technical perspective, however it takes minor visual changes.

I also can assume that we have the same issue for tablet devices, unfortunately I don't have a real tablet to test it, but I would change margin for tablet from -3.8rem to -3.2rem.

All of these lead us to a small visual change but it's really minor.

@melissaperreault @YoannJailin Could you please confirm that we are okay to make those changes?

Before

After

I think you can just change the 1.6 value to 1.5 and leave the rest untouched 🤔

We don't have the same issue for tablet devices 👍
On tablet sizes, over 750px and under 990px, the padding on the sides is 5rem while the negative margin applied to the buttons is -3.8rem so we should be safe here 🎉

Oh, you are right, I was actually looking at the header where paddings are 3.2rem.

But anyway, don't you think that, after we change 1.6 to 1.5, 3.2 rem looks a bit better when you try to see how the buttons and hamburger icons are aligned?

If don't change margin for tablet it looks like this 👇

And if we go for changing 3.8 to 3.2 for tablet it looks like this 👇

which is more closer to what it looks on mobile 👇

@ludoboludo @melissaperreault @YoannJailin

Yeah I don't think it's much of an issue for me to keep the tablet look how it currently is. I think that alignment is ideally what we would have on mobile actually. But since the svg icon is a different size compared to the hamburger menu icon it makes it a bit trickier to align.

There is also the possibility to add some extra negative margin to the icon. So the 0.1rem we removed by going from 1.6 -> 1.5 can be added to .slider-button--prev .icon through margin-left: -0.1rem;

Though I don't really think we need to go to that level of nitpicking. Curious to see what designers think 👀

I am okay with the alignment proposed! 👍

The alignment on what is live currently on the PR demo link works for me. We could be nitpicking for a long time. Someone could argue that the visual impression of the alignment feels right even though it's not when you trace a line to the edge of the icon. The live version of this PR feels good for now, both for Tablet and Mobile. 👍

melissaperreault

LGTM!

ludoboludo

👍

* Add overflow-x:hidden to prevent horizontal scrolling on mobile. * Change margin for slider for mobile and tablet.

* Fix color for image in password (#2608) * [Image behavior] fixed background jitter fix on mobile (#2611) * [Animation in editor] Remove transform translate when re rendering and re ordering blocks (#2614) * Remove transform translate when re rendering and re ordering blocks * target only what's needed * [bug] Horizontal scrolling on mobile. (#2617) * Add overflow-x:hidden to prevent horizontal scrolling on mobile. * Change margin for slider for mobile and tablet. * Remove redundant preconnect to cdn.shopify.com (#2621) * Update reverse scheme (#2626) * [Footer] Remove Global Media settings inheritance from images (#2631) * Send timezone offset as string instead of integer (#2636) * Fix slider scrolling issue (#2635) * Fix background gradient for Related Products. (#2641) * Update from Shopify for theme dawn/release/10.0.0 Committed from shop: Skeleton Theme * Quick add remove animation from image and content (#2657) * Add default values for color scheme group (#2660) * Revert unwanted changes (#2669) * Update from Shopify for theme dawn/release/10.0.0 Committed from shop: Skeleton Theme * Revert "Update from Shopify for theme dawn/release/10.0.0" This reverts commit 89d927e. * Remove forced white text color in Image Banner & Slideshow (#2663) * Remove forced white color. * Change color scheme for Dawn's default homepage Image Banner.. * Remove warning about color scheme usage. * Fix bug with transparent buttons on mobile. * Remove unused info key from translated files. * Update display of button when it's in a mobile container. * Update existing placeholder images (#2610) * Update existing placeholder images * Featured collection and product card * Featured product section * Collection list section * Featured blog and multirow sections * Slideshow: change order of placeholder images * Collage adjustments for product and collection cards * Image with text adjustments * Featured product: re-add `.product--no-media` selectors * Update featured product section * Update `card-collection` * Cleanup `card-collection` --------- Co-authored-by: Ludo <ludo.segura@shopify.com> * Gradient fix for transparent background medias and cards (#2651) * Fix media, product, and collection cards placeholder (#2682) * Fix missing else for collection cards (#2692) --------- Co-authored-by: Sofia Matulis <sofiamatulis@users.noreply.github.com> Co-authored-by: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com> Co-authored-by: Mateusz Krzeszowiak <mateusz.krzeszowiak@shopify.com> Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> Co-authored-by: Kjell Reigstad <kjell@kjellr.com> Co-authored-by: shopify[bot] <79544226+shopify[bot]@users.noreply.github.com> Co-authored-by: Ken Meleta <30790058+kmeleta@users.noreply.github.com> Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com>

* made the test/default blog post 3 by default * blog default posts are not mobile responsive and on a slider. created snippet for blog-placeholder that renders into featured-blog with changable arguments * removed commented out code * default blog posts now are modifiable by post-limit and column number presets * reformated code, reverted header back to h1, removed snippet, and made changes as suggested * noticed the blog section needs a margin bottom when color scheme is applied * removed padding from blog and removed date and author presets * Fix link formatting in Related Products heading (#2680) * fix default UI for dropdown and mega menu (#2644) * added vertical padding and made l2 bold to mega menu * added vertical padding to drop down * fixed default UI for dropdown and mega menu * added hover effect to all l2 links and fixed overlapping or mega menu * adding padding to l3 links and fixed hover effect for dropdown * reverted the mega menu back to the current setting * changed horizontal grid gap on mega menu and vertical paddings on dropdown menu * made vertical grid gap at 1.8 rem to match the 3 rem vertical paddings on mega-menu container * removed the unnecessary lines of code * removed the text-thickness that was making l2/l3 links a different size from l1 links * added a hover effect over active link * removed uneccessary link size and white space * Add release/v10.0.0 branch fixes to main (#2693) * Fix color for image in password (#2608) * [Image behavior] fixed background jitter fix on mobile (#2611) * [Animation in editor] Remove transform translate when re rendering and re ordering blocks (#2614) * Remove transform translate when re rendering and re ordering blocks * target only what's needed * [bug] Horizontal scrolling on mobile. (#2617) * Add overflow-x:hidden to prevent horizontal scrolling on mobile. * Change margin for slider for mobile and tablet. * Remove redundant preconnect to cdn.shopify.com (#2621) * Update reverse scheme (#2626) * [Footer] Remove Global Media settings inheritance from images (#2631) * Send timezone offset as string instead of integer (#2636) * Fix slider scrolling issue (#2635) * Fix background gradient for Related Products. (#2641) * Update from Shopify for theme dawn/release/10.0.0 Committed from shop: Skeleton Theme * Quick add remove animation from image and content (#2657) * Add default values for color scheme group (#2660) * Revert unwanted changes (#2669) * Update from Shopify for theme dawn/release/10.0.0 Committed from shop: Skeleton Theme * Revert "Update from Shopify for theme dawn/release/10.0.0" This reverts commit 89d927e. * Remove forced white text color in Image Banner & Slideshow (#2663) * Remove forced white color. * Change color scheme for Dawn's default homepage Image Banner.. * Remove warning about color scheme usage. * Fix bug with transparent buttons on mobile. * Remove unused info key from translated files. * Update display of button when it's in a mobile container. * Update existing placeholder images (#2610) * Update existing placeholder images * Featured collection and product card * Featured product section * Collection list section * Featured blog and multirow sections * Slideshow: change order of placeholder images * Collage adjustments for product and collection cards * Image with text adjustments * Featured product: re-add `.product--no-media` selectors * Update featured product section * Update `card-collection` * Cleanup `card-collection` --------- Co-authored-by: Ludo <ludo.segura@shopify.com> * Gradient fix for transparent background medias and cards (#2651) * Fix media, product, and collection cards placeholder (#2682) * Fix missing else for collection cards (#2692) --------- Co-authored-by: Sofia Matulis <sofiamatulis@users.noreply.github.com> Co-authored-by: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com> Co-authored-by: Mateusz Krzeszowiak <mateusz.krzeszowiak@shopify.com> Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> Co-authored-by: Kjell Reigstad <kjell@kjellr.com> Co-authored-by: shopify[bot] <79544226+shopify[bot]@users.noreply.github.com> Co-authored-by: Ken Meleta <30790058+kmeleta@users.noreply.github.com> Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com> * made the test/default blog post 3 by default * added updated placeholder image * added the different placeholder images, while maintaining ability to edit with presets * blog card theme settings work on default blog posts * removed css that wasn't being used * reverted to original code without theme settings * fixed prettier error by removing extra quotation mark and made test blog default instead of news --------- Co-authored-by: Jon Neill <jonathan.neill@shopify.com> Co-authored-by: Ludo <ludo.segura@shopify.com> Co-authored-by: Sofia Matulis <sofiamatulis@users.noreply.github.com> Co-authored-by: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com> Co-authored-by: Mateusz Krzeszowiak <mateusz.krzeszowiak@shopify.com> Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> Co-authored-by: Kjell Reigstad <kjell@kjellr.com> Co-authored-by: shopify[bot] <79544226+shopify[bot]@users.noreply.github.com> Co-authored-by: Ken Meleta <30790058+kmeleta@users.noreply.github.com> Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com>

* Add overflow-x:hidden to prevent horizontal scrolling on mobile. * Change margin for slider for mobile and tablet.

eugenekasimov force-pushed the fix-overflow-mobile branch from 9239b9a to f2a7ba3 Compare May 9, 2023 04:33

Add overflow-x:hidden to prevent horizontal scrolling on mobile.

4305882

eugenekasimov force-pushed the fix-overflow-mobile branch from f2a7ba3 to 4305882 Compare May 9, 2023 04:33

metamoni approved these changes May 9, 2023

View reviewed changes

eugenekasimov self-assigned this May 9, 2023

ludoboludo reviewed May 9, 2023

View reviewed changes

Change margin for slider for mobile and tablet.

19f1961

eugenekasimov changed the base branch from main to 10.0.0-release-branch May 9, 2023 17:33

eugenekasimov changed the base branch from 10.0.0-release-branch to release/10.0.0 May 9, 2023 17:35

melissaperreault approved these changes May 10, 2023

View reviewed changes

ludoboludo approved these changes May 10, 2023

View reviewed changes

eugenekasimov merged commit 38fe05f into release/10.0.0 May 10, 2023
5 checks passed

eugenekasimov deleted the fix-overflow-mobile branch May 10, 2023 15:59

ludoboludo pushed a commit that referenced this pull request Jun 5, 2023

[bug] Horizontal scrolling on mobile. (#2617)

7195e6f

* Add overflow-x:hidden to prevent horizontal scrolling on mobile. * Change margin for slider for mobile and tablet.

SmolSoftBoi pushed a commit to m-k-enterprises/dawn that referenced this pull request Feb 18, 2024

[bug] Horizontal scrolling on mobile. (Shopify#2617)

97ef6ec

* Add overflow-x:hidden to prevent horizontal scrolling on mobile. * Change margin for slider for mobile and tablet.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[bug] Horizontal scrolling on mobile. #2617

[bug] Horizontal scrolling on mobile. #2617

eugenekasimov commented May 9, 2023 •

edited

Loading

metamoni left a comment

ludoboludo May 9, 2023

eugenekasimov May 9, 2023 •

edited

Loading

ludoboludo May 9, 2023

eugenekasimov May 9, 2023 •

edited

Loading

ludoboludo May 9, 2023

melissaperreault May 9, 2023

melissaperreault May 10, 2023 •

edited

Loading

melissaperreault left a comment

ludoboludo left a comment

[bug] Horizontal scrolling on mobile. #2617

[bug] Horizontal scrolling on mobile. #2617

Conversation

eugenekasimov commented May 9, 2023 • edited Loading

PR Summary:

The issue

What approach did you take?

Demo links

Checklist

metamoni left a comment

Choose a reason for hiding this comment

ludoboludo May 9, 2023

Choose a reason for hiding this comment

eugenekasimov May 9, 2023 • edited Loading

Choose a reason for hiding this comment

ludoboludo May 9, 2023

Choose a reason for hiding this comment

eugenekasimov May 9, 2023 • edited Loading

Choose a reason for hiding this comment

ludoboludo May 9, 2023

Choose a reason for hiding this comment

melissaperreault May 9, 2023

Choose a reason for hiding this comment

melissaperreault May 10, 2023 • edited Loading

Choose a reason for hiding this comment

melissaperreault left a comment

Choose a reason for hiding this comment

ludoboludo left a comment

Choose a reason for hiding this comment

eugenekasimov commented May 9, 2023 •

edited

Loading

eugenekasimov May 9, 2023 •

edited

Loading

eugenekasimov May 9, 2023 •

edited

Loading

melissaperreault May 10, 2023 •

edited

Loading