x

Mobile viewing mixes paragraphs from desktop version

I just created a website for my business - www.deepeningourcapacity.com. The desktop version works fine. However, on the home page of the mobile version, one of the paragraphs that is supposed to be under a different title (Organizational Development) gets pushed down under another title (Executive Coaching). I've re-created the whole section again, but the same thing happens. How do I fix this?

514 Views
Message 1 of 7
Report
6 REPLIES 6
Square Community Moderator

Hi @Becky11n 👋 Welcome to the Square Seller Community!

 

This happens when you add content, but do not stack in columns. It can be a little tricky at first to get down, but once you practice a bit it will become super easy to accomplish. 

 

To fix your current page, I recommend first creating a copy of the page you need to edit. Click on Pages at the top of the editor, then click on the page name in the left panel that you need to copy. Click the "copy" option, then rename the copy page if you want, and also make sure to click the box that says "hide in navigation".

 

You can practice on the copy page till you are comfortable editing the original page, or you can complete the edits on the copy page, then replace the copy with the original. We'll circle back to how to do this step once you are finished with the edits.

 

Hover over the elements to see the blue guide lines which will show you where your columns are. You'll notice the bottom two are stacked correctly, but the top two have a line break after the titles. This is why your mobile view is showing the way it is. The content will display left to right per each row break. 

 

Bottom: 

 

 

Top:

 

 

 

You will need to move the blocks so that you see the same view as the bottom boxes. It's a little hard to describe how to do this, so if you create the copy page and let me know, I can create a screen recording for you instead of trying to explain how to move everything into the correct column. 😊

 

You can also reply back giving me permission to create the copy page. Thanks in advance! 

 

505 Views
Message 2 of 7
Report

Thanks @BernadetteA . I made a copy of the page and hid the navigation. As far as I can tell (and clearly I'm missing something), the top and bottom rows are the same. On both, there is an independent box for the title and one for the paragraph under it. Can you provide more guidance? Thank you so much! 

503 Views
Message 3 of 7
Report
Square Community Moderator

I'm not the best at explaining this, so I definitely understand your confusion! 

 

This is the top section. The blue line separating the two titles is what is causing the mobile view to stack the way it is. Content will be stacked in order from left to right on the screen, based on where these blue horizontal and vertical lines are. 

 

 

Because of the blue line here ^ mobile view will stack the two titles, then move down to the paragraphs. While you want the two paragraphs separated, you also want to make sure the titles are included in the same column before the break.

 

 

It's hard to see, but there is a very faint blue line separating the two titles and the paragraphs in the above image. 

 

 

Okay, so now for the bottom two sections, there only line separating the content is the single horizontal line. The title and paragraph for both sections are in their own box, and not separated like the earlier example. 

 

 

I'm going to try to get a screen recording so that you and others can see how you can fix this. 

500 Views
Message 4 of 7
Report
Square Community Moderator

It looks like you were able to move the content into columns properly! 😊 I noticed the content was not in the same order as the original home page, so I made another copy for the recording. Try to pay close attention to the blue lines as I'm moving things around.Part of the editor cuts off at one point, but you should still be able to see the blue line even during that part. 

 

 

 

 

P.S. at some point I inadvertently edited the home page, so all you need to do at this point is publish! 😊

499 Views
Message 5 of 7
Report

You were soooo helpful!  Thank you so much! Before learning from you, I had spent hours and hours looking for answers online. I can't tell you how much I appreciate your help. Thank you!

495 Views
Message 6 of 7
Report
Square Community Moderator

You're welcome, @Becky11n 😊 Glad I was able to help you out! ❤️

489 Views
Message 7 of 7
Report