[Blog post section] Fix slides size on mobile #2368
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ludoboludo
changed the title
kmeleta
approved these changes
Mar 16, 2023
pangloss
added a commit
to pangloss/dawn
that referenced
this pull request
Mar 23, 2023
* shopify/main: Gift cards/add recipient (Shopify#2412) Update 1 translation file (Shopify#2453) [Slideshow] Add ambient movement to background (Shopify#2383) Wrap calls to search results ind collection counts in paginate to reduce additional requests (Shopify#2421) [Header] Add app block in the header section (Shopify#2238) [Image with Text] Add ambient movement to image (Shopify#2385) Update 1 translation file (Shopify#2450) [Blog post section] Fix slides size on mobile (Shopify#2368) Duplicated scrollbar in drawer menu (Shopify#2400) [Header locales] Support gradients (Shopify#2386) [Image banner] Add ambient movement to background (Shopify#2342)
phapsidesGT
pushed a commit
to Gravytrain-UK/gt-shopify-dawn-theme
that referenced
this pull request
Sep 3, 2024
* Overwrite spacing on mobile for blog post section * switch to option 2
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
PR Summary:
This fixes the slider for the blog post section on mobile that doesn't show the right amount of total slides.
Why are these changes introduced?
Fixes https://github.com/Shopify/dawn-private/issues/141
What approach did you take?
There are two approached here that could be taken:
horizontal space).calc(100% - 3rem - var(--grid-mobile-horizontal-spacing)). This is great as well but has a visual impact. As it adds apeek-a-booeffect that wasn't there before:Screenshot comparison
In this first iteration of the PR I went with approach1.Updated it so it uses approach 2 👍
Other considerations
Decision log
Visual impact on existing themes
None with option 1 and if we go with option 2, I shared a screenshot with the visual impact, adding the peek a boo effect which wasn't there before on mobile.
Testing steps/scenarios
layoutsettings and play with the value ofhorizontal spacing,Demo links
Checklist