Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed extra margin spacing in collage section when header is empty #2770

Merged

Conversation

lougoncharenko
Copy link
Contributor

PR Summary:

Removes extra margin spacing in collage section If header is blank.

Why are these changes introduced?

Fixes #2708 .

What approach did you take?

I added a conditional in collage.liquid code that would only render the h2 and the stylings associated with it if the heading wasn't blank.

Other considerations

Add css properties to remove the margin-bottom of 3 rem on the wrapper if header is blank. This could potentially be an even more complicated approach.

Visual impact on existing themes

If merchants want to add multiple collage sections and don't include any headings in the later collage sections, there will no longer be an extra h2 margin spacing.

Testing steps/scenarios

  • Add 2 or more collage sections
  • Test the code with adding a heading
  • Remove the heading and test to see if the margin is not visible
  • Increase and decrease section top and bottom paddings
  • Test with color schemes and gradient to ensure nothing is broken
  • Test in mobile, tablet and desktop mode.

Demo links

Checklist

@lougoncharenko lougoncharenko self-assigned this Jul 5, 2023
@lougoncharenko lougoncharenko linked an issue Jul 5, 2023 that may be closed by this pull request
@lougoncharenko lougoncharenko requested a review from kmeleta July 5, 2023 15:52
Copy link
Contributor

@ludoboludo ludoboludo left a comment

Choose a reason for hiding this comment

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

Just a small nitpick otherwise looking good and working as I'd expect.

Copy link
Contributor

@kmeleta kmeleta left a comment

Choose a reason for hiding this comment

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

lgtm

@lougoncharenko lougoncharenko merged commit 72b0267 into main Aug 9, 2023
@lougoncharenko lougoncharenko deleted the fix-extra-spacing-margin-around-h1-h6-elements-when-empty branch August 9, 2023 15:24
TimmersThomas added a commit to TimmersThomas/shopify-template-houseofchocolate that referenced this pull request Aug 13, 2023
* upstream/main: (205 commits)
  Fix for small screens with large fonts don't fit all content (Shopify#2946)
  Adjust quantity rules margin (Shopify#2948)
  Update Social media settings defaults to remove Shopify links (Shopify#2830)
  added json to barcode to pass gtin as a json string (Shopify#2804)
  Fixed extra margin spacing in collage section when header is empty (Shopify#2770)
  Track state of mouseenter event (Shopify#2934)
  Fix misalignment of total items in quick order list (Shopify#2923)
  Hide vol pricing and qty rules when variant is unavailable (Shopify#2889)
  Fix font family for quick order list (Shopify#2888)
  v11.0.0 version bump and release notes (Shopify#2916)
  Revert "v11.0.0 version bump and release notes (Shopify#2906)" (Shopify#2915)
  Update quantity-popover.css
  v11.0.0 version bump and release notes (Shopify#2906)
  Fix social list styles loading (Shopify#2900)
  Fix an error (Shopify#2903)
  Fix hardcoded info color (Shopify#2893)
  Fix error misalignment for Quick order list (Shopify#2887)
  Replace generic section name with section ID. (Shopify#2884)
  Fix cart drawer for variant list and tablet spacing (Shopify#2880)
  Add missing shadow styles to inputs in Quick Order List (Shopify#2879)
  ...
phapsidesGT pushed a commit to Gravytrain-UK/gt-shopify-dawn-theme that referenced this pull request Sep 3, 2024
…hopify#2770)

* added a conditional to only render an h2 when there is a heading

* added whitespace management dashes
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Extra spacing (margin) around h1-h6 elements when empty
3 participants