Responsive Help

Need help Responsiveness
1

Making this page responsive will be the absolute death of me.

I have tried just about everything I can think of to make these text boxes fall the right way… I have tried grouping them in different arrangements, sticking them to a margin, moving them around a ton and even hiding some of the content.

Here is my page on desktop

Screen Shot 2017-03-16 at 2.40.57 AM.png846×461 44.2 KB

and here is what it is giving me on on mobile after about 30 different renditions.

I have created a separate mobile page that looks like this…

But my concern is that anyone who resizes the page on their computer will be left with the monstrosity above

My question:

Is there any advice of how I can get the example above to look more like my mobile specific page? Also is this the best option?

-Dave

2

The trick is not only to group appropriately, but to use invisible shape controls to act as padders. These are then set to minimum width 0. They help to kill these big white space blocks you see.

Use the Margins tool to understand what is controlling what in the responsive editor.

Also, use the responsive dev tools in Chrome, they give a better representation of what is going on than the built in responsive editor, and they have predefined views for things like iPad, iPhone etc. etc. so you can quickly see what the view looks like in different devices.

1 Like
3

Awesome help, thank you.

4

See below example of a group wrap that I took ages to get working correctly. It can be a painfull process the first few times!

group wrap.gif886×491 2.39 MB

1 Like
5

I can only imagine how long that took to get right :slight_smile:

-Dave

7

Soo any idea why it is defaulting to these overlapping instead of making it push to the next line?

Is there any way to add CSS to fix this? For how great this program is the responsive handling is really a bummer…

8

There can be many reasons, make sure that you have the controls set for left page alignment, and not left and right, that might be one reason for the overlap. Also, check your positions, you might have to check the x co-ordinates to make sure you haven’t accidently already overlapped them.

You just need to keep playing! You will get the hang of it!

1 Like