From 78e420296397beae3096b2d05f4da7ccf31467a1 Mon Sep 17 00:00:00 2001 From: Robert McGovern Date: Sun, 4 Oct 2020 12:04:01 +0100 Subject: [PATCH] Fix for html issue and making the share button move. --- .../article-preview-component/css/style.css | 10 ++++++---- .../article-preview-component/index.html | 4 ++-- .../article-preview-component/notes/process.md | 16 ++++++++++++++++ 3 files changed, 24 insertions(+), 6 deletions(-) diff --git a/FrontendMentor/article-preview-component/css/style.css b/FrontendMentor/article-preview-component/css/style.css index 0abf2d5..66e10f6 100644 --- a/FrontendMentor/article-preview-component/css/style.css +++ b/FrontendMentor/article-preview-component/css/style.css @@ -86,6 +86,8 @@ body { padding: 1rem 1.5rem 1rem 1.5rem; transition: 250ms ease-in-out; + + position: relative; } .authorImage { @@ -137,7 +139,7 @@ body { .articleShareButtonTooltip { display: none; - position: relative; + position: absolute; justify-content: space-between; align-items: center; @@ -148,10 +150,9 @@ body { width: 170px; padding: 0.75rem 1rem; - bottom: 80px; - left: -104px; + top: -60px; + right: -47px; - overflow: visible; } .articleShareButtonTooltip::before { @@ -234,6 +235,7 @@ body { .articleFooter { padding: 0rem 1.75rem 1.5rem 1.5rem; } + } .attribution { position: absolute; bottom: 0; font-size: 11px; text-align: center; } diff --git a/FrontendMentor/article-preview-component/index.html b/FrontendMentor/article-preview-component/index.html index de3c47f..5ec32e7 100644 --- a/FrontendMentor/article-preview-component/index.html +++ b/FrontendMentor/article-preview-component/index.html @@ -48,13 +48,13 @@ +

SHARE

Facebook Icon Twitter Icon Pinterest Icon
- diff --git a/FrontendMentor/article-preview-component/notes/process.md b/FrontendMentor/article-preview-component/notes/process.md index 3209a00..017de1b 100644 --- a/FrontendMentor/article-preview-component/notes/process.md +++ b/FrontendMentor/article-preview-component/notes/process.md @@ -70,3 +70,19 @@ Differences from design ![Mobile Final Difference](./mobile-diff-final.png) ![Desktop Final Difference](./desktop-diff-final.png) + +--- + +On subnmission there was an HTML issue: + +``` +Element div not allowed as child of element button in this context. (Suppressing further errors from this subtree.) + +Context: + +
+``` + +Fixed it. Moved the div outside of the button. Then set `position:relative;` on `articleFooter`, and `position: absolute;` on `.articleShareButtonTooltip` + +Last thing, how to I "fake click the tooltip off the screen' when passing the media query breakpoint? \ No newline at end of file