This thread is resolved. Here is a description of the problem and solution.
Problem: In desktop screens my site is displayed with two columns. In mobile, it is shown in one column. However, I would like to reorganize the order of content in that column.
Solution: Change your markup structure so the similar events section is shown below the two columns. Use CSS to clear the floated columns.
Relevant Documentation:
https://getbootstrap.com/docs/3.3/css/
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | - | - |
| 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | - | - |
Supporter timezone: America/New_York (GMT-04:00)
This topic contains 7 replies, has 2 voices.
Last updated by 5 years, 6 months ago.
Assisted by: Christian Cox.
Tell us what you are trying to do? I created a Single Product Content Template with Toolset. I also added a section for Similar Products (woo_related). The problem is that on the Mobile Views - the Related Products appear before the registation/purchase of the single product.
Is there any documentation that you are following? See 2 screenshots for the Mobile View - the Registration is all the way at the end after the Other Products. The related/Similar Products need to be Below the Registration/Add to Cart and not in the middle of the Product page.
Is there a similar example that we can see? See 2 screenshots where you can see how it looks when people scroll down.
What is the link to your site? hidden link
It's difficult to explain without getting into technical aspects of how HTML works. Let's say you have two "blocks" right now, one is the left column which contains the Description area and the Similar Events area. The other block is the right column, which contains the Order and Contact forms. Since the Description and Similar Events are in one block, it's difficult to manipulate content from the other block in-between those two sections. The blocks don't like to be broken apart and reorganized that way in a responsive grid. So my suggestion is to create 3 blocks instead. The description block still goes in the top left. The Order and Contact forms still go in the top right. Then you also have a Similar Events block that is separate from those, and it goes below both blocks. This solves the problem in mobile, because the Similar Events block will be at the bottom. However, in Desktop the Similar Events block sits completely below the two other blocks. This causes a gap above the Similar Events block. I'm attaching a simple mockup here.
