Problem with SVG positioning on portrait tablet only

[user4794]

Throughout the site I created (now live) I am using an SVG shape (ribbon) to highlight some headlines. The headlines are stacked together and the SVG is within the same container but not stacked so it can overlap the text but behind the text. The position of the SVG is correct on desktop, mobile, tablet landscape but not in portrait (see screenshots).
For some reason, on some the positioning is correct, I have analysed what could be different but I am struggling to make sens of it.

I am also concerned that there is no way to edit the portrait breakpoint, which in 2025 is MAD! I have also used the AI help tool but the answers are incorrect.

I am using Wix Studio

I have tried to make sure that the SVG is docked consistently at the bottom of the container but this isn’t helping. I tried to stack the SVG to the text but the SVG appears on top of the text even when moved in the background.

Help would be very much appreciated.

[Dan_Suhr]

I would stack the text and svg together and set the margin so they overlap. Then add to the other stack of text.

[user4794]

Hi Dan, thank you, I did not think about that, I will have a go

[user4794]

Ok, I just tried it and for some reason, when I stack the SVG with the text it brings the SVG in the foreground. Even when moving the SVG below the text in the layers… I don’t get it??

[noahlovell]

When you Stack elements - it gives them a relationship to one another.

Here’s how I’d approach it:

• Put the SVG and the “Luke 4 v. 18-19” in a container. This way you’re saying “these elements have a relation to one another, and need to remain in this layout”.
• Stack the Container (the one with the SVG and text) with the text above it.

In your layers, you’ll end up with something like:

• Quote section
  • Stack
    • “The Spirit of the…”
    • Container
      • Luke 4 v. 18-19
      • Vector Art

[user4794]

Hi Noah, it worked! thank you so much for the tip