Streaming live at 10am (PST)

Help with text and image positioning on mobile devices


#1

Hi!

My text looks just fine but when I go to tablet or phone mode it goes all weird. Could anyone tell me why this happens and how to fix it?

Also, I would like the image to appear before text in mobile devices but if I do so it’ll change in the desktop version too.

Here is my public share link:

https://preview.webflow.com/preview/aboamedica?utm_source=aboamedica&preview=99d7c520e99aab1e2d30d38d97319e6f


#2

You must have somehow copied the text from a document and it retained some formatting properties.

Delete all your text, and paste it again but this time using Cmd+Shift+V (or Ctrl+Shift+V) so that it’s pasted s text and not as formatted text. Then redo the desired formatting on the desktop view and proceed from there.

To have a different order of elements on devices than on desktop, you don’t have much choices but to use Flexbox. If you move the image for mobile, of course it will affect the desktop. Only what’s defined in the STYLE panel can be changed and defined for each devices without affecting the upper devices.

So, select your Column element, give it Flexbox, now go to devices, and check the “Reverse layout” option.


#3

Ah, thank you, the reverse layout really helped. Somehow didn’t notice that.

But the problem with the text persists. I did as you asked (though I needed to press Cmd+Shift+Option+V). I’ll attach a gif regarding it:


#4

Weirdly, your bold element is set to the wrong Display mode. And as the property appears in blue, you ust have changed it somehow. Use the one pointed by the green arrow.


#5

I probably didn’t understand this right, but I can’t seem to be able to choose that option pointed by the green arrow.


#6

Hi Rudeism,

It looks like your Text Block ‘Uutuudet’ has the flexbox option selected. Change Text Block ‘Uutuudet’ to Display: Block.

Now you can select Display: Inline for the Bold Text.


#7

That ought to do it! Thank you very much, both of you! :smile: