Streaming live at 10am (PST)

Floats and Clears / Changing page structure on devices


#1

Hi,

So far so good on all layouts, but on ipad portrait. I'd like a different layout. Left to right - Left [Game image], Right [Upper Left Game Title], [Game description under Game Title], [Play Now Button under game description].

I'm having difficulty doing this. Im not a coder so Im learning as I go go along with work.

Thanks for any help
http://gamesftue.webflow.com/


#2

Hi @Leif if on Desktop you have your columns Float:Left, for Tablet all you have to do is select your column class and make it Float:Right to make it reversed. Is that your intention?


#3

Hi @thesergie This is the layout on iPad portrait I am trying to achieve. I just tried to float right and it has the same layout but just reversed columns.


#4

Oh ok I see what you are trying to do. You'll have to put the title, description text, and button in a separate Block. THen when you go to Tablet, set the "gamediv" class to 100%, and then the image to 50% and the new block with the content to 50% (all floated left).


#5

Think I have the same issue (or at least very related) - I wanted to change from image on the right on desktop to image on the top on mobile (https://webflow.com/design/jjjjklkjlkj?preview=7b7815b35f46ec5c4ee4da0f466b0d1f). I had it set up as columns for which it is not possible to set 'float' styling.

I've tried using the approach described above using divs, but it doesn't work since I want 100% width on mobile. Would it be possible to do @thesergie?

Would be nice with a setting on the individual columns display order in addition to 'stacking on top of each vs. staying side-by-side', but is probably an edge case smile


#6