2 Texts side by side - responsive question

I have two texts (year and vehicle Make/Model) that need to be side by side. See below:

I did have them in one text but using the Rich Text Editor does not allow me to size them correctly (can only use size = 1, 2, 3, etc.). Now I’ve tried making them two texts so I have complete control over size. But I’m not sure how to get the two texts to sit side-by-side.

I have combined them in a group, made the year text fixed width, and in the responsive tab, I have left aligned the Year, the Make_Model and the group that contains them. But the Make+Model moves out to the right on wide screens and to the left over the top of the year on mobile.

Is there a way to achieve what I’m after?

GROUP them and the use settings for the group element in Responsive tab to ensure proper behavior is one way.

What you want to do is to use the “Apply a max width when the page is stretched” function to a group that specifically contains those two elements. See below for a video of how to set it up.

1 Like

Apologies @keith I’m not sure what you mean. Right now the two are grouped. The Year is fixed width responsive left justified. The Make+Model is responsive left justified. The group is responsive left justified. What’s left to set?

Thank you @dan1 but I want to avoid max width if possible because some of the older cars (I’m building for vintage car repairers) have really long names and the bit that distinguishes is at the very end. I could allow it to wrap if it is not wide enough but I’m hoping to avoid that if I can. I watch the video though because it might be the best option. I do use it effectively elsewhere. I just thought there was something simple about responsive I am not getting. I’m a newbie.

I think @dan1 has got you on the right path here. I didn’t read the latter parts of your message closely enough. What Dan is pointing out is that if elements are doing “unexpected” things as page width goes large, you may want/need to enforce a “Max Width” on them.

1 Like

Ok. Thank you @dan1 and @keith - I will most likely go for the max width solution with warping (I have text off to the right which you don’t see and It’s hidden with max width). I think that is beter than facing the wrath of my designer :slight_smile:

Responsiveness in Bubble can be a mystery to me sometimes mystify me well. Based on your forum activity, I’d say you’re making really great progress in Bubble :slight_smile:

To confirm, in this case, I’d say for the Make/Model reference, stretch the text field as far as you’re willing to (ie. butting up close to the year, but account for any responsiveness constraints) and set the text for the Make/Model to be right aligned.

1 Like

Thank you for the compliment @dan1. I learn fast (play video at 2x) make copious handwritten notes and try to help other because those the best learning methods I know. My background in software development, albeit in the dark ages 28 years ago of DOS, Unix, PDP 11s, etc. has been of some benefit, not to mention I’ve built a couple of successful tech businesses and mentored many tech entrepreneurs, so I’ve had to stay on my toes. But I’ve honestly written nothing more than an equation in Excel in all that time. I guess it’s like riding a bike, you never forget the fundamentals … until you fall off that is :bike:

1 Like