Why is my SVG image appearing very small on my webpage?

Store Design
, ,

Topic summary

An SVG map image is displaying extremely small on a Shopify page and only appears when text is present. The user attempted to manually increase the image size in the code without success.

Root Cause Identified:

  • The CSS property position: absolute applied to the map was causing the sizing and visibility issues
  • Removing this property resolved the display problem

Resolution:

  • Removing position: absolute from the CSS fixed the image size
  • The map now displays at normal size regardless of text presence

Follow-up Issue:

  • A jQuery-based infobox is positioning incorrectly—appearing far to the right instead of next to the cursor
  • The user is seeking guidance on how to adjust the positioning to follow the cursor properly

Screenshots and code snippets were shared to illustrate both the original problem and the positioning issue.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

I have an SVG image that I’ve tried to attach to my page with HTML and CSS. However, it only appears as a very small image and only when I’ve inserted some additional text to the page. How can I make this bigger and also not reliant upon text being present? I’ve already tried manually increasing the size of the image in the code. Below are screenshot examples.

Map.JPG
Map.JPG638×374 14.2 KB

site.JPG
site.JPG727×249 6.86 KB

2

@LEC - can you please share this page link?

3

Yes - https://353d6b-2.myshopify.com/pages/map-of-representatives

You’ll see a very tiny map next to the period. It’s strange, as when I remove the CSS the map returns to normal size. Adding CSS styling to the map makes it small and disappear when no text is present on the page.

I am also happy to share code if need be.

4

@LEC - in that css you have given position:absolute to the map, please remove that and check

suyash1_0-1696947265000.png
suyash1_0-1696947265000.png1366×768 83.2 KB

1 Like
5

That fixed it! Thank you for the help!

6

@LEC - welcome, do let me know if you need any more updates

1 Like
7

I do have one last quick question, if you don’t mind.

The JQuery code I am using is for some reason not placing the infobox next to the cursor, but is instead placing it far to the right. How would I make it so that the info box is right next to the user’s cursor?

Here is the code block: