Highlighted

Layout scrambles in responsive Design & Tip for a table

Community Beginner ,
Jun 19, 2017

Copy link to clipboard

Copied

Hi everybody,

I started to design a responsive website with muse and everything looks good in the first break point (1024):

Bildschirmfoto 2017-06-19 um 17.10.28.png

But in the next breakpoint it looks like this:

Bildschirmfoto 2017-06-19 um 17.10.44.png

I know I have to rearrange the elements in every breakpoint. But that's superhard if they all are stacked over another!

Is there a solution for this and maybe someone has a tip how I can do a proper table to show the differnt numbers in the colums.

Now every number is a textfield and I have to arrange it...

Looking forward to your help.

Thanks in advance

Michael

The reason for that is quite unavoidable. I tried to explain it here: https://forums.adobe.com/message/8749608#8749608.

The most easiest way to avoid the problems you are encountering:

Create your layout as recommended: Start with only one – the widest – breakpoint, and if you are mostly done add the other breakpoint.

Talking about tables: A very simple trick to avoid your "table problems" and create nice looking tables within Muse: Create one text frame and paste the small textframes as an object into it. In this case you are able to easily edit and format the table (including images!) as you like and it won’t fall apart across different breakpoints.

This table is completely created in Muse, and you can handle it as one single element without puzzling around with small single text boxes:

Screen.jpg

Here you can download this example as a .muse file: https://www.dropbox.com/s/qlma4a736mfhcw8/Simple_Table_Trick.zip?dl=0

Views

83

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Layout scrambles in responsive Design & Tip for a table

Community Beginner ,
Jun 19, 2017

Copy link to clipboard

Copied

Hi everybody,

I started to design a responsive website with muse and everything looks good in the first break point (1024):

Bildschirmfoto 2017-06-19 um 17.10.28.png

But in the next breakpoint it looks like this:

Bildschirmfoto 2017-06-19 um 17.10.44.png

I know I have to rearrange the elements in every breakpoint. But that's superhard if they all are stacked over another!

Is there a solution for this and maybe someone has a tip how I can do a proper table to show the differnt numbers in the colums.

Now every number is a textfield and I have to arrange it...

Looking forward to your help.

Thanks in advance

Michael

The reason for that is quite unavoidable. I tried to explain it here: https://forums.adobe.com/message/8749608#8749608.

The most easiest way to avoid the problems you are encountering:

Create your layout as recommended: Start with only one – the widest – breakpoint, and if you are mostly done add the other breakpoint.

Talking about tables: A very simple trick to avoid your "table problems" and create nice looking tables within Muse: Create one text frame and paste the small textframes as an object into it. In this case you are able to easily edit and format the table (including images!) as you like and it won’t fall apart across different breakpoints.

This table is completely created in Muse, and you can handle it as one single element without puzzling around with small single text boxes:

Screen.jpg

Here you can download this example as a .muse file: https://www.dropbox.com/s/qlma4a736mfhcw8/Simple_Table_Trick.zip?dl=0

Views

84

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 19, 2017 0
Adobe Community Professional ,
Jun 19, 2017

Copy link to clipboard

Copied

You have to rearrange the tabbed composition in your second breakpoint and every following breakpoint, of course.

You may also have to resize it (have no idea, why it got bigger).

What you could do to make handling a light easier: Right-Click onto one element and look for "Copy size and position to …" it will show you all breakpoints you already set.

Bildschirmfoto 2017-06-19 um 18.06.00.png

I hope you always use the same tabbed composition? It looks like you use another compo?

For tables you could watch: HTML Table generator - TablesGenerator.com

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 19, 2017 1
LEGEND ,
Jun 19, 2017

Copy link to clipboard

Copied

The reason for that is quite unavoidable. I tried to explain it here: https://forums.adobe.com/message/8749608#8749608.

The most easiest way to avoid the problems you are encountering:

Create your layout as recommended: Start with only one – the widest – breakpoint, and if you are mostly done add the other breakpoint.

Talking about tables: A very simple trick to avoid your "table problems" and create nice looking tables within Muse: Create one text frame and paste the small textframes as an object into it. In this case you are able to easily edit and format the table (including images!) as you like and it won’t fall apart across different breakpoints.

This table is completely created in Muse, and you can handle it as one single element without puzzling around with small single text boxes:

Screen.jpg

Here you can download this example as a .muse file: https://www.dropbox.com/s/qlma4a736mfhcw8/Simple_Table_Trick.zip?dl=0

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 19, 2017 0