Why is my group not centered on the live page?

I think this group used to be centered, then I started playing around with the responsive settings to make it look good on mobile and at some point it became uncentered. Any idea what I did wrong here?

https://app.subaligner.com/

Hey @nathanlively :wave:

I know responsiveness can be frustrating. Let me see what I can do to help. :+1:

Do you have the image at the upper right overlapping your group? This will cause the responsiveness to not work correctly. Try moving the group down to see if that fixes it.

Hope that helps! :blush:

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

  • One-on-One Tutoring
  • eLearning Hub
  • Video Tutorials
  • No-Code Classes
1 Like

Thanks J805. Yes, it’s overlapping both the main page group and the header group, but that’s part of the design. The image is under everything. I like it, but honestly, it’s just for fun, so let me try to delete it and see if that fixes it.

Yep, that did it. So, that’s said. Is there any way to keep that image on the page and still have the main group be centered?

1 Like

I would have to do some testing. Nothing comes to mind though. :thinking: I should say, no ‘no-code’ solution comes to mind. Hopefully @nomorecode can give you the code for it. :+1:

1 Like

Nathan, are you comfortable with a little CSS?

1 Like

Sure, but I’m pretty new. I didn’t even know you could use CSS in Bubble.

Ok grab your circle image path from your DB > Data tab > File manager

The on your page add a small HTML visual element and add the following code inside it:

<style>
body {
background: url("your_file_path_goes_here") 80% 0% no-repeat;
}
</style>

Give that whirly :love_you_gesture:

1 Like

Cool. Since I deleted the image, I guess I need to upload it…somewhere else?

Just drop the image uploader anywhere on the page to upload the circle image back > then delete the image uploader from page. Go back to file manager and swipe the image path > drop the full path into the code above ^^^ bish bash bosh :slight_smile:

1 Like

lol @J805, even us no coders need a little code :eyes:

1 Like

Ah, nothing was showing up in the file uploader until I hit the “search” button.

It worked! Now I just need to figure out the CSS for the position on the page. Thanks everyone!

No problemo, btw px also work so you can find your exact header size

<style>
body {
background: url("your_file_path_goes_here") 80% 100px no-repeat;
}
</style>
1 Like

Haha. :joy: Yup.

Got it!

1 Like

You beaut Nathan, well done mate. I little friendly tip for you regarding UI, tone down the logout button into your grey as this is a negative action. You want all your CTAs to be your primary blue… then pull out your other blues (as used in the bg circle) on secondary elements. That will give your app more authority and clarity. Best of luck pal… you done good.

2 Likes

You can see here how I’m using my primary to draw the eye. Just some food for thought mate, no ill intention.

All the best
James - nomorecode.co

2 Likes

Thanks!