The formatting looks full-width when designing. I tried to upload the “before” image but this forum only allows new users 1 image in a post. Generous!
But here’s how the formatting looks when published:
(ignore the purple oil paint over the text)
Any idea why the formatting gets so messed up? Thanks.
Hi Michael,
We’re sorry you are having this issue. Root cause might be flexbox settings or custom code like CSS. Please try to share the exact page URL with issue so we can see how it is. By having access on the page, we can inspect why it is showing the way and be specific on our recommendation. Please also share an image on how should it be on your reply. Thank you.
Thank you, Lely.
I guess I don’t need to hid the text. Here is the URL with the issue: https://matrixrising.com/seo-methods/.
Here is how the page should look on a desktop.
Thank you, Michael
Hello Michael,
Is there a chance that you can temporarily disable the coming soon page of your site so that we can access and check it then provide some suggestions?
Thank you.
Oh yes. I have removed the “Coming Soon” on the site for now.
You can see the layout on this page (https://matrixrising.com/about/) for an idea of how the formatting should look on the page I am seeking help on (https://matrixrising.com/seo-methods/).
Thank you!
Hello Michael,
You are having this issue because you have inserted a broken html code:
<ul>
<div style="color:rgb(242, 242, 242)"> <li><strong>Interview</strong> – Discuss web search engine optimization and conversion goals, focus keywords, marketing tactics, linking arrangements, past or future site redesigns, use of redirects or canonicals.</li>
<li><strong>Examine Site Data</strong> – Check visitor demographics and geography; study historic rankings, traffic, conversion, and revenue; compare branded vs. non-branded traffic; identify search engine penalties.</li>
<li><strong>Analyze Layout</strong> of website design, navigation, conversion paths.</li>
<li><strong>Evaluate Content</strong> for uniqueness and keyword relevance.</li>
<li><strong>Assess URL Folder Structure</strong>, meta-tag usage and targeting, rich text markup.</li>
<li><strong>Appraise On-Site Linking</strong> strategy and keyword usage in the menu structure, in anchor text on all page types; in header and footer; between relevant pages; and assess the value of outgoing links.</li>
<li><strong>Identify Crawl and Indexing Obstacles</strong> including misuse of redirects, rel=canonicals, pagination, robots.txt, noindex, or parameter handling rules; load time problems; duplicate pages; dynamic URLs; server response code issues; links obscured by Javascript or Flash; or XML sitemap errors.</li>
</div>
You are supposed to insert this format:
<div style="color:rgb(242, 242, 242)">
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</div>
Please double check all your html contents and make sure that it is valid and correct to prevent from messing up the columns in the live view of the page.
Hope this helps. Kindly let us know.
Thanks for reviewing, Ruenel. The only difference between your html code and the code I had inserted was that I had “strong” tags included within the list bullets of the unordered list. “strong” tags can go within lists just fine, as long as they have proper opening and closing tags, which mine did.
In any case, just to demonstrate the error further: I deleted all of the unordered lists and now the html code only includes a color change to white, and some text within proper paragraph tags, and the same formatting problem occurs. Meaning: All of the text gets jammed into a skinny column on the left side of the screen for no apparent reason, on a full-screen desktop layout. That’s shown here: https://snipboard.io/3q2ri1.jpg.
It should look how it does when in design mode. Like this: https://snipboard.io/DvrJN9.jpg
Here’s some more detail on the problem.
I created a test page at https://matrixrising.com/?page_id=248. And on this test page, the same problem exists with a very skinny column when I re-size the page to be thinner. In my attached image, the issue appears in div class=“e248-8 x-col”
When I re-size this page to make it thinner horizontally, this flex box jumps in size from 993 pixels wide way down to 346 pixels wide.There is no in-between. Why is that? Why can’t it be 992 pixels wide or 900 or 700 or 500? And how do we fix that?
See this image: https://snipboard.io/Agb3Il.jpg
Thank you.
I figured it out.
I needed to learn to use the “Layout” section properly. This: https://snipboard.io/epcvmu.jpg
My issue is resolved now.
Glad you have figured it out and thank you for updating us Michael.
Yes, it would be best to use the layout option and avoid actual html because it is prone to errors when the content is long. Just to dissect your code above there, here’s the issues with it:
1.) You have div tag right after ul. Should be ul then li. Inside li you can add the div.
2.) Missing ul closing tag.
Hope this helps!
Gotcha. Thank you, Lely for your review and analysis! Very much appreciated.
You’re most welcome, Michael.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
