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…
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@hidden 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…
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@hidden 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…
On Mar 4, 2020, at 8:54 AM, Walter Lee Davis email@hidden 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@hidden 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…
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 Can I use... Support tables for HTML5, CSS3, etc
Walter
On Mar 4, 2020, at 10:38 AM, Plus Art Info email@hidden wrote:
Thanks a lot, Walter!
Sent from my iPhone
On Mar 4, 2020, at 8:54 AM, Walter Lee Davis email@hidden 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@hidden 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…
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@hidden 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 Can I use... Support tables for HTML5, CSS3, etc
Walter
On Mar 4, 2020, at 10:38 AM, Plus Art Info email@hidden wrote:
Thanks a lot, Walter!
Sent from my iPhone
On Mar 4, 2020, at 8:54 AM, Walter Lee Davis email@hidden 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@hidden 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…
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.
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@hidden 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.
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@hidden 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@hidden 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.