Hi everyone,
I am trying to recreate a design in Bubble with a box containing an image, a title, and a text. The margins, image size and font size are different between the desktop and mobile views.
While I managed to change the image size and the text width in a responsive way, it seems that I am not able to change the text or image VERTICAL margins in a responsive way.
Right now I can’t edit the vertical spacing between elements or the vertical margins.
What should I do to get these two slightly different designs?
Desktop version (the vertical margin between top and image is large by design, e.g. 64 pixels)
Hi, if the box has fixed width, remove it. Then in the responsive editor drag it to the desired width. also the text element increase the width, so it shows on only 2 lines on the mobile. Hope this helps.
Also for the vertical spaces in between the texts, move them closer together in the editor.
Hi Yvonne thank you very much for your reply.
You’ve got the point. Those borders are fine for the desktop version so If I move them closer together in the editor I am breaking the desktop version border, but they look fine on the desktop version. They should be modified only for the mobile version, where I would like them to shrink to a determined amount.
If I follow literally your advice, I am fixing the borders so that the responsive version is fine but I am breaking them again on the desktop version.
Is there a way to have this kind of behavior?
a fixed amount of vertical space for the desktop version (e.g. 64 pixels)
a fixed different amount of vertical space for the mobile version (e.g. 16 pixels)
Oh I get, hmm well I’m not sure, the only thing I’m sure of is changing the font sizes for mobile, but it won’t solve the vertical space issue. I guess you should keep playing around with the elements till you get something similar to what you want on both desktop and mobile.
You can accomplish this by having a duplicate group that only shows on mobile. Vertical sizing is in a pain and likely needs custom CSS or JS to accomplish. Having a separate group for Mobile is how I’d do this without venturing into code territory.
Hi Andrew! Thank you for your kind reply!
Do you know a way to do it with CSS or JS? I am not scared of using them!
Moreover, I noticed that if I create another component for the mobile version, then the whole section, i.e.the mega-group that contains all those components needs to have a mobile version as well.
For example, try to imagine the following section with all the components like the leftmost ones:
I am going to have a huge vertical space between the components and the end of the section, so to fix that I have to duplicate the section itself: but this way I am basically doing two version of the same site Q.Q
Is this really the only way? It is like to create two versions of the same website, and what is worse is that the “switch” would not be centralized, but rather a huge list of components conditions like “if page width <= 600 then visible = ON”.
I don’t know the css or JavaScript needed for this, sorry! I came to Bubble because I don’t know how to code, so I just deal with the weird workarounds.
You are right, though, my suggested method basically requires you to build the site twice.
