diff --git a/src/js/components/Tip/__tests__/__snapshots__/Tip-test.tsx.snap b/src/js/components/Tip/__tests__/__snapshots__/Tip-test.tsx.snap
index 8f73302959..0ae871edb7 100644
--- a/src/js/components/Tip/__tests__/__snapshots__/Tip-test.tsx.snap
+++ b/src/js/components/Tip/__tests__/__snapshots__/Tip-test.tsx.snap
@@ -579,12 +579,6 @@ exports[`Tip themed 1`] = `
   animation-delay: 0.01s;
 }
 
-@media only screen and (max-width:768px) {
-  .c0 {
-    margin: 21px;
-  }
-}
-
 @media only screen and (max-width:768px) {
   .c2 {
     margin: 3px;
diff --git a/src/js/utils/styles.js b/src/js/utils/styles.js
index b1784dafcd..6eaae25f74 100644
--- a/src/js/utils/styles.js
+++ b/src/js/utils/styles.js
@@ -41,17 +41,19 @@ export const edgeStyle = (
   responsiveBreakpoint,
   theme,
 ) => {
-  const breakpoint =
-    responsiveBreakpoint && theme.global.breakpoints[responsiveBreakpoint];
+  const breakpoint = getBreakpointStyle(theme, responsiveBreakpoint);
+  const metric = theme.global.edgeSize[data] || data;
+  const responsiveMetric = responsive && breakpoint &&
+    breakpoint.edgeSize[data];
 
   if (typeof data === 'string') {
     return css`
-      ${kind}: ${theme.global.edgeSize[data] || data};
-      ${responsive && breakpoint
+      ${kind}: ${metric};
+      ${responsiveMetric
         ? breakpointStyle(
             breakpoint,
             `
-        ${kind}: ${breakpoint.edgeSize[data] || data};
+        ${kind}: ${responsiveMetric};
       `,
           )
         : ''};