Code Editor - need to edit content on page, not just CSS

[DDF]

I need to access the HTML for the content of a particular page to fix a layout error that's occurring on mobile. I can access all the CSS files, but I can't figure out how to get to the page content itself. Can someone tell me what I need to do to get this to appear?

Thank you,

Kim

[Bernadette3]

Hi Kim. What are you trying to edit? We can let you know if it is possible or not. 

[DDF]

It's these tables that Weebly is creating from the drag and drop. Because they're single-row, they're not keeping the image and the connected content below it grouped together on mobile (though it looks fine on desktop). I need to try and fix this, as 80% of these pages are a mess on mobile. Or even better, can someone tell me how to keep these elements together using the drag and drop? I know it can be done as there is one page that works correctly, but since I didn't build it I don't know how it was created.

Thanks!

[PaulMathews]

@DDF You can't access the html for a Weebly column but that's not actually your problem here. Weebly columns have to be set up with respect to the columnar content and an understanding of how the columnar content will wrap in mobile. In the html you provided, there are three images contained in a row of three columns. I'm presuming that, in the desktop view, beneath each image is a snippet of descriptive text. I can't see the text content in the html code you showed but I'd guess that it is basically a repeat of the image columns html (with text in place of images) and, if so, this is incorrect.

What you likely have are two separate three-column content blocks, one sitting on top of the other. The first three-column block contains your images. The second block has the same columnar layout as the first (probably three equal 33.3% width columns) containing the associated image text. When you move to mobile, the first three-column block (images) will restack vertically and, beneath that, the second three-column block (text) will also restack vertically. The two stacks are completely disconnected and that's the problem.

Here's what should have been done:

1. Create the three-column image block.
2. Add a text element WITHIN the first column (right beneath the first image). DO NOT add the text element in a new multicolumnar row - it must be contained in the same "cell" as the first image (in html terms, the div containing the image must be immediately followed by the div containing the text content and both of those divs are contained within a single table row <td> tag).
3. Repeat this for the other two columns.

Now, when you move to the mobile view, the content will restack vertically with the first image followed by its associated text followed by the second image followed by it associated text followed by the third image followed by its associated text.

Simply drag each text block out of its three-column block and place each one directly below its associated image WITHIN the row containing the image column. When you're done, you'll have just one row of three columns. Each column will contain an image with associated text right below it. Here's an example (go the "Process" section: https://www.beachhousebuiltins.com/). Shrink the width of the browser window to see how the columnar content reorganizes itself.

[DDF]

Thanks, @PaulMathews. I did try to do this when I initially built this version of the page, but obviously failed. I tried again to drag the text that is supposed to appear below the image into the same row and got this: 

Yet, I did the same thing with another piece of content and it worked. How can I know when I've dragged the content to the correct row?

[PaulMathews · Accepted solution]

@DDF When you drag any element to the content area, you'll see a blue horizontal or vertical indicator bar. The bar is horizontal when the drop zone is between two full width elements. It's vertical when you are to the left or right of an existing page element (in which case, dropping the new element will generate a column split). In the image you provided, you've clearly dropped the text element to the right of the image element. If you pull the text element and place it below the image element, at some point the indicator bar will become horizontal (below the image) and that's when you drop the text element. In the case of an image that is itself within a column, when you place the text below that image, the horizontal bar must be no wider than the width of the column which indicates that the text element will be dropped within the column (if the horizontal bar is the full width of the page, you're in the drop zone BELOW the columns, one of which contains the image - and you'll have to move the text element upward toward the image to get into the image column).