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?
Hey @nathanlively
I know responsiveness can be frustrating. Let me see what I can do to help.
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!
For All Your No-Code Education Needs:
- One-on-One Tutoring
- eLearning Hub
- Video Tutorials
- No-Code Classes
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?
I would have to do some testing. Nothing comes to mind though. I should say, no ‘no-code’ solution comes to mind. Hopefully @nomorecode can give you the code for it.
Nathan, are you comfortable with a little CSS?
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
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
lol @J805, even us no coders need a little code
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>
Haha. Yup.
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.
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
Thanks!