diff --git a/assets/src/scripts/d3-rendering/legend.js b/assets/src/scripts/d3-rendering/legend.js
index ac13e716253682ac571a4b5e9a3d94d4c5b101fe..42f47a7748e9a7042a85cb1adaf822dad21d0b3b 100644
--- a/assets/src/scripts/d3-rendering/legend.js
+++ b/assets/src/scripts/d3-rendering/legend.js
@@ -32,9 +32,9 @@ export const drawSimpleLegend = function(div, {legendMarkerRows, layout}) {
 
     legend.append('rect')
         .attr('x', 0)
-        .attr('y', 0)
-        .attr('width', 98)
-        .attr('height', VERTICAL_ROW_OFFSET_PROVISIONAL_DATA_MESSAGE + 5)
+        .attr('y', mediaQuery(config.USWDS_MEDIUM_SCREEN) ? 0 : 5)
+        .attr('width', mediaQuery(config.USWDS_MEDIUM_SCREEN) ? 98 : 73)
+        .attr('height', mediaQuery(config.USWDS_MEDIUM_SCREEN) ? VERTICAL_ROW_OFFSET_PROVISIONAL_DATA_MESSAGE + 5 : 17)
         .attr('fill', '#565c65')
         .attr('rx', 2);
 
@@ -44,8 +44,11 @@ export const drawSimpleLegend = function(div, {legendMarkerRows, layout}) {
         .attr('x', 8)
         .attr('y', VERTICAL_ROW_OFFSET_PROVISIONAL_DATA_MESSAGE)
         .append('tspan')
-        .text('IMPORTANT').style('fill', 'white')
-        .append('tspan').text('data shown may be provisional - ').style('fill', 'black').attr('x', 105)
+        .text('IMPORTANT')
+        .style('fill', 'white')
+        .append('tspan').text('data may be provisional - ')
+        .style('fill', 'black')
+        .attr('x', mediaQuery(config.USWDS_MEDIUM_SCREEN) ? 105 : 75)
         .append('tspan')
         .text('learn more')
         .style('fill', '#0000EE');
diff --git a/assets/src/scripts/d3-rendering/legend.spec.js b/assets/src/scripts/d3-rendering/legend.spec.js
index e6480653c0607e791e4a589725629f735d178704..7b06248fd76a3aeda2c9d9bafdb35b1b977e4967 100644
--- a/assets/src/scripts/d3-rendering/legend.spec.js
+++ b/assets/src/scripts/d3-rendering/legend.spec.js
@@ -65,7 +65,7 @@ describe('Legend module', () => {
 
             expect(container.select('svg').size()).toBe(1);
             expect(container.selectAll('line').size()).toBe(2);
-            expect(container.selectAll('rect').size()).toBe(1);
+            expect(container.selectAll('rect').size()).toBe(2); // The 'provisional data message' adds a background rectangle that is always present in the legend, making the count one more than would be expected from the mock data
             expect(container.selectAll('text').size()).toBe(5); // The 'provisional data message' is a text node that is always present in the legend, making the count one more than might be expected from the mock data
         });
     });