diff --git a/src/components/map/hooks/use-map-constants.tsx b/src/components/map/hooks/use-map-constants.tsx
index 6a13610f0..cb45aa95e 100644
--- a/src/components/map/hooks/use-map-constants.tsx
+++ b/src/components/map/hooks/use-map-constants.tsx
@@ -42,7 +42,14 @@ export function useMapConstants() {
 		},
 	];
 
-	const MAP_TREE_ZOOMED_IN_OFFSET = [-150, 0] as PointLike;
+	// Our main breakpoint is 1024px, on desktop-like screens we want to offset the tree circle to the left
+	// because the tree popup is displayed on the right side of the screen. On mobile-like screens we don't
+	// want to offset the tree circle, because the tree popup is displayed full screen.
+	const mapTreeZoomedInOffset = (windowWidth: number): PointLike => {
+		return windowWidth >= 1024
+			? ([-150, 0] as PointLike)
+			: ([0, 0] as PointLike);
+	};
 
 	// The link is stored in source code instead of environment variable, because of the required string interpolation of lat/lng/id which would be too complicated to handle in environment variables
 	const pumpUpdateLink = (id: number, lat: number, lng: number) => {
@@ -60,9 +67,9 @@ export function useMapConstants() {
 		MAP_CENTER_LAT,
 		MAP_PUMP_IMAGE_ICONS,
 		TREE_GRAY_COLOR,
-		MAP_TREE_ZOOMED_IN_OFFSET,
 		TREE_YELLOW_COLOR,
 		TREE_ORANGE_COLOR,
+		mapTreeZoomedInOffset,
 		pumpUpdateLink,
 	};
 }
diff --git a/src/components/map/hooks/use-map-trees-interaction.tsx b/src/components/map/hooks/use-map-trees-interaction.tsx
index ec1314cbf..b75918506 100644
--- a/src/components/map/hooks/use-map-trees-interaction.tsx
+++ b/src/components/map/hooks/use-map-trees-interaction.tsx
@@ -14,7 +14,7 @@ import { useProfileStore } from "../../../shared-stores/profile-store.tsx";
 export function useMapTreesInteraction(map: mapboxgl.Map | undefined) {
 	const { hideFilterView } = useFilterStore();
 
-	const { MAP_MAX_ZOOM_LEVEL, MAP_TREE_ZOOMED_IN_OFFSET } = useMapConstants();
+	const { MAP_MAX_ZOOM_LEVEL, mapTreeZoomedInOffset } = useMapConstants();
 
 	const { setHoveredTreeId } = useHoveredTree(map);
 	const { setSelectedTreeId } = useSelectedTree(map);
@@ -96,7 +96,7 @@ export function useMapTreesInteraction(map: mapboxgl.Map | undefined) {
 					zoom: MAP_MAX_ZOOM_LEVEL,
 					duration: 1500,
 					essential: true,
-					offset: MAP_TREE_ZOOMED_IN_OFFSET,
+					offset: mapTreeZoomedInOffset(window.innerWidth),
 				});
 			});
 			return;
@@ -167,7 +167,7 @@ export function useMapTreesInteraction(map: mapboxgl.Map | undefined) {
 				zoom: MAP_MAX_ZOOM_LEVEL,
 				essential: true,
 				duration: 1500,
-				offset: MAP_TREE_ZOOMED_IN_OFFSET,
+				offset: mapTreeZoomedInOffset(window.innerWidth),
 			});
 			map.once("moveend", () => {
 				setEaseToStartedByUserClick(false);