Trying to float an element center - MOBILE & DESKTOP

Store Design
, ,

Topic summary

Goal: center an element that “floats” (overlays) at the bottom center on both desktop and mobile.

  • Original setup: a div wrapping an image with CSS position: fixed; bottom: 8%; left: 50%.

  • Problem: element isn’t visually centered on desktop or mobile.

  • Suggested change: use flexbox on the wrapper (.xxxx { display: flex; justify-content: center; align-items: center; }).

  • Result: element becomes centered but no longer floats; it affects layout by pushing the footer, which is not desired.

Key technical context:

  • “Floating” here refers to fixed positioning (overlay) independent of normal page flow.
  • Flexbox centers content within normal flow, which conflicts with the fixed overlay requirement.

Outcome/Status:

  • No confirmed solution yet; the offered flex approach changes behavior and doesn’t meet the overlay requirement.
  • Discussion remains open; further guidance is needed to center a fixed-position element across devices.

Notes:

  • Code snippets are central to understanding the issue.
Summarized with AI on January 10. AI used: gpt-5.
1

Liquid

CSS

.xxxx {
position: fixed;
bottom: 8%;
left: 50%;
}

Seems to not be centered on desktop and not centered on mobile. Tried a few ways, but this code was the best so far. ANy help would be appreciated. Thanks

2

Liquid

CSS

.xxxx {
  display: flex;
  justify-content: center;
  align-items: center;
}
3

It is definitely center, but it’s not floating anymore. just pushes the bottom of the footer up and stays there. Need it floating.