FreewayTalk

11 replies to this thread. Most Recent

Marcus Do Carmo

4 Mar 2020, 4:12 am

CSS3 Columns breakpoint

Hi Walter, I hope all is well.

I applied this action to a text box and set it up with 2 columns, and it looks nice, it’s a great solution for me, however, I wish I could stop the action below 768 breakpoints, and make it normal as 1 column, so the text wouldn’t be so tight. I tried, but couldn’t find the way. I am sure you have a magic solution for this…

Please let me know, Best,

Marcus

Miami, Florida

iMac 27” - Mac OS 10.14.4 - Freeway Pro 7

http://www.plusartgraphics.com

Gordon Low

4 Mar 2020, 9:57 am

I think you could achieve this effect by having two html blocks.

Inside the first block have your normal two column text and set it to be published at the larger width and not published at the narrower width.

Inside the second html block just have the text as one column. Set it not to be published at larger width and change to published at smaller widths.

The two blocks shouldn’t need to be on top of each other, one underneath the other should be fine. If you use an inline layout when one block isn’t published everything else will move to fill the space.

All the best

Gordon


On 4 Mar 2020, at 4:12 am, Marcus Do Carmo <[email protected]> wrote:

Hi Walter, I hope all is well.

I applied this action to a text box and set it up with 2 columns, and it looks nice, it’s a great solution for me, however, I wish I could stop the action below 768 breakpoints, and make it normal as 1 column, so the text wouldn’t be so tight. I tried, but couldn’t find the way. I am sure you have a magic solution for this…

Please let me know, Best,

Marcus

waltd

4 Mar 2020, 1:54 pm

This is do-able, but you have to write some extra CSS by hand to override the code that the Action writes at the smaller screen size. If you’re up for that, let me know, and I’ll show you how todo that.

I’m also noticing that this Action doesn’t write out up-to-date code — it pm;y has -webkit and -moz- prefixed styling rules in the resulting CSS, which means that any browser that doesn’t respond to those (Chrome, Edge) will miss out on the effect. I’ll see if I can fix that, too.

Walter

On Mar 3, 2020, at 11:12 PM, Marcus Do Carmo <[email protected]> wrote:

Hi Walter, I hope all is well.

I applied this action to a text box and set it up with 2 columns, and it looks nice, it’s a great solution for me, however, I wish I could stop the action below 768 breakpoints, and make it normal as 1 column, so the text wouldn’t be so tight. I tried, but couldn’t find the way. I am sure you have a magic solution for this…

Please let me know, Best,

Marcus

Freeway user since 1997

http://www.walterdavisstudio.com

Marcus Do Carmo

4 Mar 2020, 3:38 pm

Thanks a lot, Walter!

Sent from my iPhone

On Mar 4, 2020, at 8:54 AM, Walter Lee Davis <[email protected]> wrote:

This is do-able, but you have to write some extra CSS by hand to override the code that the Action writes at the smaller screen size. If you’re up for that, let me know, and I’ll show you how todo that.

I’m also noticing that this Action doesn’t write out up-to-date code — it pm;y has -webkit and -moz- prefixed styling rules in the resulting CSS, which means that any browser that doesn’t respond to those (Chrome, Edge) will miss out on the effect. I’ll see if I can fix that, too.

Walter

On Mar 3, 2020, at 11:12 PM, Marcus Do Carmo <[email protected]> wrote:

Hi Walter, I hope all is well.

I applied this action to a text box and set it up with 2 columns, and it looks nice, it’s a great solution for me, however, I wish I could stop the action below 768 breakpoints, and make it normal as 1 column, so the text wouldn’t be so tight. I tried, but couldn’t find the way. I am sure you have a magic solution for this…

Please let me know, Best,

Marcus

Miami, Florida

iMac 27” - Mac OS 10.14.4 - Freeway Pro 7

http://www.plusartgraphics.com

Marcus Do Carmo

4 Mar 2020, 5:21 pm

Hi Gordon, that’s a great idea too. I didn’t think about that and will give it a try.

Thanks, Marcus

Miami, Florida

iMac 27” - Mac OS 10.14.4 - Freeway Pro 7

http://www.plusartgraphics.com

waltd

4 Mar 2020, 11:37 pm

I’ve updated the action to allow you to set the breakpoint below which the columns disappear. It’s not optional, and the default is 415px, which is an iPhone in portrait orientation. Below that width, the columns disappear, and the text just flows to one column.

If you want this break to happen at a wider viewport, you can change this number. I also updated the Action to output the un-prefixed and prefixed styling rules, so all the modern browsers should show this effect. You can check this at https://caniuse.com/#search=column-count

Walter

On Mar 4, 2020, at 10:38 AM, Plus Art Info <[email protected]> wrote:

Thanks a lot, Walter!

Sent from my iPhone

On Mar 4, 2020, at 8:54 AM, Walter Lee Davis <[email protected]> wrote:

This is do-able, but you have to write some extra CSS by hand to override the code that the Action writes at the smaller screen size. If you’re up for that, let me know, and I’ll show you how todo that.

I’m also noticing that this Action doesn’t write out up-to-date code — it pm;y has -webkit and -moz- prefixed styling rules in the resulting CSS, which means that any browser that doesn’t respond to those (Chrome, Edge) will miss out on the effect. I’ll see if I can fix that, too.

Walter

On Mar 3, 2020, at 11:12 PM, Marcus Do Carmo <[email protected]> wrote:

Hi Walter, I hope all is well.

I applied this action to a text box and set it up with 2 columns, and it looks nice, it’s a great solution for me, however, I wish I could stop the action below 768 breakpoints, and make it normal as 1 column, so the text wouldn’t be so tight. I tried, but couldn’t find the way. I am sure you have a magic solution for this…

Please let me know, Best,

Marcus

Freeway user since 1997

http://www.walterdavisstudio.com

Marcus Do Carmo

5 Mar 2020, 3:24 am

Thank you so much, Walter for taking your time in updating the action. I really appreciate it. I had a long day today, and still haven’t finished but will do it soon.

Marcus

Sent from my iPhone

On Mar 4, 2020, at 6:37 PM, Walter Lee Davis <[email protected]> wrote:

I’ve updated the action to allow you to set the breakpoint below which the columns disappear. It’s not optional, and the default is 415px, which is an iPhone in portrait orientation. Below that width, the columns disappear, and the text just flows to one column.

If you want this break to happen at a wider viewport, you can change this number. I also updated the Action to output the un-prefixed and prefixed styling rules, so all the modern browsers should show this effect. You can check this at https://caniuse.com/#search=column-count

Walter

On Mar 4, 2020, at 10:38 AM, Plus Art Info <[email protected]> wrote:

Thanks a lot, Walter!

Sent from my iPhone

On Mar 4, 2020, at 8:54 AM, Walter Lee Davis <[email protected]> wrote:

This is do-able, but you have to write some extra CSS by hand to override the code that the Action writes at the smaller screen size. If you’re up for that, let me know, and I’ll show you how todo that.

I’m also noticing that this Action doesn’t write out up-to-date code — it pm;y has -webkit and -moz- prefixed styling rules in the resulting CSS, which means that any browser that doesn’t respond to those (Chrome, Edge) will miss out on the effect. I’ll see if I can fix that, too.

Walter

On Mar 3, 2020, at 11:12 PM, Marcus Do Carmo <[email protected]> wrote:

Hi Walter, I hope all is well.

I applied this action to a text box and set it up with 2 columns, and it looks nice, it’s a great solution for me, however, I wish I could stop the action below 768 breakpoints, and make it normal as 1 column, so the text wouldn’t be so tight. I tried, but couldn’t find the way. I am sure you have a magic solution for this…

Please let me know, Best,

Marcus

Miami, Florida

iMac 27” - Mac OS 10.14.4 - Freeway Pro 7

http://www.plusartgraphics.com

Marcus Do Carmo

5 Mar 2020, 5:57 am

Hi Walter, I updated the action, deleted the old version, installed the new one and applied it to the text box, however I didn’t find the option to change the breakpoint, and after I published, nothing happened. I’m sure I’m doing something wrong, but have’t find it.

Best, Marcus

Miami, Florida

iMac 27” - Mac OS 10.14.4 - Freeway Pro 7

http://www.plusartgraphics.com

waltd

5 Mar 2020, 2:08 pm

Look in the Actions palette, when the item you’ve applied the Action to is selected in the design view. In the bottom-right corner of the palette, you should see the version number 0.4.0. If you don’t see that, then you’re still running on a cached version of the old Action. If you do see that, look at the top item in the Action interface. It should read “Show full-width below [415]”. Changing that number is going to allow you to set the breakpoint. Remember, set it one pixel above whatever breakpoint size you want it to stop working.

Walter

On Mar 5, 2020, at 12:57 AM, Marcus Do Carmo <[email protected]> wrote:

Hi Walter, I updated the action, deleted the old version, installed the new one and applied it to the text box, however I didn’t find the option to change the breakpoint, and after I published, nothing happened. I’m sure I’m doing something wrong, but have’t find it.

Best, Marcus

Freeway user since 1997

http://www.walterdavisstudio.com

Marcus Do Carmo

5 Mar 2020, 3:23 pm

Hi Walter. Yep. I still have the cached old one. Let me try to clean up this and let you know. Best Marcus.

Sent from my iPhone

On Mar 5, 2020, at 9:08 AM, Walter Lee Davis <[email protected]> wrote:

Look in the Actions palette, when the item you’ve applied the Action to is selected in the design view. In the bottom-right corner of the palette, you should see the version number 0.4.0. If you don’t see that, then you’re still running on a cached version of the old Action. If you do see that, look at the top item in the Action interface. It should read “Show full-width below [415]”. Changing that number is going to allow you to set the breakpoint. Remember, set it one pixel above whatever breakpoint size you want it to stop working.

Walter

On Mar 5, 2020, at 12:57 AM, Marcus Do Carmo <[email protected]> wrote:

Hi Walter, I updated the action, deleted the old version, installed the new one and applied it to the text box, however I didn’t find the option to change the breakpoint, and after I published, nothing happened. I’m sure I’m doing something wrong, but have’t find it.

Best, Marcus

Miami, Florida

iMac 27” - Mac OS 10.14.4 - Freeway Pro 7

http://www.plusartgraphics.com

Marcus Do Carmo

6 Mar 2020, 2:42 am

Hi Walter, I finally got the problem, cleaned the cache and now I see the version number 0.4.0. and it’s working.

Thank you so much, Walter!

Marcus

Miami, Florida

iMac 27” - Mac OS 10.14.4 - Freeway Pro 7

http://www.plusartgraphics.com

Back to Top

waltd

6 Mar 2020, 2:55 am

You are welcome!

Walter

On Mar 5, 2020, at 9:42 PM, Marcus Do Carmo <[email protected]> wrote:

Hi Walter, I finally got the problem, cleaned the cache and now I see the version number 0.4.0. and it’s working.

Thank you so much, Walter!

Marcus

Freeway user since 1997

http://www.walterdavisstudio.com