Skip to content
This repository has been archived by the owner on Apr 3, 2023. It is now read-only.

Fix templates on mobile #142

Merged
merged 4 commits into from
Dec 5, 2022
Merged

Fix templates on mobile #142

merged 4 commits into from
Dec 5, 2022

Conversation

donnapep
Copy link
Contributor

@donnapep donnapep commented Dec 4, 2022

The accepted way of setting site-wide padding is to use the useRootPaddingAwareAlignments theme setting. Enabling this setting adds default padding as specified in settings.styles.spacing.padding of theme.json. Then, any blocks that have the alignfull class will automatically have a negative margin applied by that same amount so that the block extends to the edges of the browser. (We can also use this for setting top and bottom padding in the future.)

More details about how this works can be found here and here.

Testing Instructions

  • Test all custom page templates as well as the 404, archive, index, page, post and search templates (pretty much every single template 😛 ). They should all have 20px of left and right padding on mobile.
  • Test Sensei's existing course patterns (Long Sales Page, Video Hero etc.). Ensure that the blocks that are set to alignfull extend from edge to edge of the browser (i.e. they have no left or right padding).

@donnapep donnapep self-assigned this Dec 4, 2022
@donnapep donnapep added [Pri] High Theme Needed for project board filtering labels Dec 4, 2022
@donnapep donnapep requested a review from a team December 4, 2022 22:42
Copy link
Contributor

@gabrielcaires gabrielcaires left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I checked all templates and all of them seem working well on mobile and desktop, I just found that the blockGap configuration is causing some issues on the patterns like this one:

Screenshot 2022-12-05 at 11 05 05

But I think we should fix it on other PRs because it seems like the correct way to do it.

We also have an issue with the margin-bottom (same image, space between the green background and the green line, but I also think it is another PR.

@donnapep
Copy link
Contributor Author

donnapep commented Dec 5, 2022

I just found that the blockGap configuration is causing some issues on the patterns like this one

Mikey from Team Zen already submitted PRs for the testimonial spacing issues in both the theme and plugin. And I'd though you submitted a PR for the other issue? 🤔

@donnapep donnapep merged commit ed2d264 into trunk Dec 5, 2022
@donnapep donnapep deleted the fix/whitespace-on-mobile branch December 5, 2022 14:17
@donnapep donnapep added this to the 1.2.0 milestone Dec 6, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
[Pri] High Theme Needed for project board filtering
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants