▼
Streaming live at 10am (PST)

Need help with html embed widget positioning

#1

I'm getting an odd error with the positioning on an HTML embed. The element is a shopping cart widget that appears in the top left corner (fixed) on desktop viewports, and is supposed to appear at the bottom of the dropdown menu on tablet and phone viewports (relative positioning). In the Webflow designer, the element is showing its position correctly, but after publishing it's acting as if it's positioned absolutely, and is showing up on top of the other menu links. See the screenshots and read only links below. Thanks for anyone's help in advance!

Webflow Designer Preview

screenshot1.png1480x791 74.7 KB

Published

screenshot2.png767x791 147 KB

Here is my public share link: LINK

#2

The embed code has a style that makes it position: fixed. You need to override this with

<style>
@media screen and (max-width: 991px) {
  #sr-basket-widget {
    position: relative !important;
  }
}
</style>

Append this in your embed code.

#3

Hey @samliew. I tried that, and tried removing the position line as well, but am getting the same result. The element shows up correctly on desktop views, but is still overlapping the top navigation link in tablet and phone viewports.

#4

I don't see where you have inserted the code I gave you. Could you screenshot it?

#5

screenshot1.png1153x425 28.9 KB

#6

Put it in the Footer Code instead, after everything. It's also missing a pair of brackets, see updated code.

#7

Thanks. Now it's positioned at the bottom of the dropdown, like it should be, but I'm having trouble changing the alignment now. I changed the left and right padding to 0px for the mobile viewports, but it's still shifted to the left.

screenshot1.png629x607 82.5 KB

screenshot2.png1142x403 44.5 KB

#8 
<style>
@media screen and (max-width: 991px) {
  #sr-basket-widget {
    position: relative !important;
    right: 0 !important;
    border-radius: 0 !important;
  }
}
</style>
#9

Super helpful as always @samliew. Thanks for your help, that worked!

#10

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.