tag:service.skybound.ca,2010-06-18:/discussions/problems/169092-tracking-down-widthStylizer: Discussion 2018-04-16T17:25:46Ztag:service.skybound.ca,2010-06-18:Comment/450864352018-04-16T02:53:51Z2018-04-16T02:53:51ZTracking down width?<div><p>I can't seem to access <a href="http://ahymsin.org/main/teachers/upcoming-events.html">http://ahymsin.org/main/teachers/upcoming-events.html</a>, it comes back as "Bad karma: we can't find that page!"</p>
<p>But the error page seems to have the same problem: when you resize the page too small, the text flows off the page.</p>
<p>The problem with this layout is that you have a main container element that is both <code>float: right</code> and <code>width: auto</code>. You'll need to override the <code>float: right</code> bit when the browser is narrow enough that only one column is displayed. On your main page (which doesn't have the problem) I don't think the main container element is floated at all, which is even better.</p>
<p>You can fix the problem by adding something like this:</p>
<pre>
<code>@media (max-width: 768px) {
.pls-layout-cell {
float: none;
}
}</code>
</pre>
<p>I placed this code at the bottom of "template.css" above " End Additional CSS Styles ".</p>
<p>I figured this out by using bullseye to target one of the title elements that was flowing off the page, and then moving up the breadcrumb at the bottom until I found the outermost ancestor which was flowing off the page. This offending element was <code>.pls-layout-cell</code> and I could see it was both floated and had a width of auto.</p>
<p>That said, when you use <code>float</code> to position a side panel, the most reliable method is to <em>not float</em> the center panel used to display the main content, but rather to put a fixed margin on the left or right side of it, and then float the side panel to the left or right side of the content <em>into the margin</em>. When the page is narrow enough that the floated panel needs to be displayed below instead, remove or override the margin so that the content element becomes the full width of the page. But if you don't want to go to all this trouble to fix the layout, the easiest workaround is probably the one I described above.</p>
<p><em>(And finally, it looks like the style sheets for this page do not open when you use the Chrome plugin in Stylizer. I have opened an issue to figure out what the problem is and get it fixed. The style sheets do load correctly when using the Firefox and Chrome plugins, however.)</em></p></div>Andrewtag:service.skybound.ca,2010-06-18:Comment/450864352018-04-16T15:41:31Z2018-04-16T15:41:31ZTracking down width?<div><p>Thanks for the explanation on tracking this type of thing down. I had tried using bullseye, but wasn't sure how to trace the actual problem. I also found I could search for things, such as "width".</p>
<p>I did find out that I could fix the problem in articles by removing long unbreakable strings of text. I don't understand why that was a problem on other pages but not the front page, but I will study your explanation, and maybe the front page styling has additional overrides or something.</p>
<p>But, there are a lot of other pages with the same problem (just go though menus!), as you found out. (Example "About Ahymsin" on first menu)</p>
<p>The template was generated with Artisteer, so I have to put customizations, etc. in the customization section and regenerate after I try out your suggestions. VERY BIG THANKS for the explanations!</p>
<p>I also found that using Stylizer 7 for "mobile" versus "desktop" viewports was a bit unintuitive until I accidentally clicked on one of the rulers. That disengaged the two windows I was showing so that they resized independently which helps a lot in comparison! I hope you can generate more up to date tutorials and walk-throughs on how to track down things like this.</p>
<p>I might have more questions after I work through your comments more.</p></div>tabletguytag:service.skybound.ca,2010-06-18:Comment/450864352018-04-16T15:56:35Z2018-04-16T15:56:35ZTracking down width?<div><p>Thanks for the suggestion of prompting users to turn on rulers. Perhaps we should add one of those green bubbles to Stylizer to suggest turning on Rulers at an appropriate time (in addition to suggesting it in a tutorial or walk-through at some point in the future).</p>
<blockquote>
<p>I did find out that I could fix the problem in articles by removing long unbreakable strings of text. I don't understand why that was a problem on other pages but not the front page, but I will study your explanation, and maybe the front page styling has additional overrides or something.</p>
</blockquote>
<p>Long unbreakable strings affect the width of a <code>width: auto</code> element (and run outside of their container in a fixed-width element, which isn't much better). You can force the browser to break up long strings with <code>word-break: break-word</code>. This is an inherited property so setting it on the container element should be sufficient. Or if the only long unbreakable strings are URLs, limiting the style to <code><a></code> elements may be a safer choice.</p></div>Andrewtag:service.skybound.ca,2010-06-18:Comment/450864352018-04-16T16:00:18Z2018-04-16T16:00:18ZTracking down width?<div><p>I don't understand what you meant by "... moving up the breadcrumb at the bottom..."</p>
<p>and what to look at to determine the result: " until I found the outermost ancestor which was flowing off the page."</p>
<p>For example I used <a href="http://ahymsin.org/main/about/introducing-ahymsin.html">http://ahymsin.org/main/about/introducing-ahymsin.html</a></p>
<p>I set display to two vertical windows. Left at 360px, right at 640px. Let window has the problem, right window does not have it.</p>
<p>Using bullseye in left window, I could potentially highlight the "Introducing AHYMSIN" title's inner-most (text only?) or outermost (full title line). Which one works?</p>
<p>Do I have "Rules" or "Styles" visible at the bottom?</p>
<p>Is the "breadcrumb" the bottom-most line? I assume that is showing the chain of inheritance?</p>
<p>Do you click on each of the sections on the bottom to see what it affects?</p>
<p>Does "moving up" mean you start with the rightmost (most specific) and then keep clicking the one to the left of that?</p>
<p>I tried all of the above, but I don't see how you determined the "outermost ancestor which was flowing off the page".</p></div>tabletguytag:service.skybound.ca,2010-06-18:Comment/450864352018-04-16T16:31:00Z2018-04-16T16:31:00ZTracking down width?<div><p>Word-break: break-word doesn't seem to be legal. Stylizer says "break-word is not a recognized value for word-break.</p>
<p>(Would be nice if you could copy error messages from the bottom error window!)</p>
<p>So, adding "word-break: break-all" on the "A:link" style within Stylizer DID work for the <a href="http://ahymsin.org/main/about/introducing-ahymsin.html">http://ahymsin.org/main/about/introducing-ahymsin.html</a> page. Not sure if it will fix all article pages yet.</p></div>tabletguytag:service.skybound.ca,2010-06-18:Comment/450864352018-04-16T16:33:01Z2018-04-16T16:33:01ZTracking down width?<div><p>To clarify, the Breadcrumb Bar beneath the Bullseye results pane displays the <a href="http://www.skybound.ca/help/productivity.html#breadcrumb">ancestors of the Bullseye target element</a>.</p>
<p>And yes, by "moving up the Breadcrumb" I meant clicking on each of the buttons in the Breadcrumb from rightmost to leftmost. When you position your mouse over a button on the Breadcrumb, Stylizer highlights the corresponding element on the page. As you are clicking Breadcrumb buttons, notice the moment when the blue highlight rectangle switches from extending off the left edge of the page, to being properly contained within the page. The outermost element (leftmost button on the breadcrumb) which extends off the edge of the page is usually the one with the problematic style.</p>
<p>There are many factors that affect the width of an element, and sometimes it is difficult to determine which style is the culprit. Experience helps, but even lacking that, you can often figure out the problem by clicking on styles that you think may be problematic and temporarily disabling them (F8).</p>
<p>If the problem only happens at a certain width, remember that Stylizer updates the Bullseye results in real-time—try using the Ruler to switch between a width that is working correctly and a width that is not, and observe the difference in CSS between the two widths. This technique is not as helpful for float-based layouts like this one, but it does come in quite handy when styling templates based on responsive grid systems.</p>
<p><em>(It would be awesome if Stylizer helped you compare the CSS between different widths and/or elements by putting them beside each other on the screen at once. Maybe someday.)</em></p></div>Andrewtag:service.skybound.ca,2010-06-18:Comment/450864352018-04-16T16:34:43Z2018-04-16T16:34:43ZTracking down width?<div><blockquote>
<p>Word-break: break-word doesn't seem to be legal. Stylizer says "break-word is not a recognized value for word-break.</p>
</blockquote>
<p>Sorry, looks like break-word only works in Chrome. Should have double-checked that.</p>
<p><code>word-break: break-all</code> on links is exactly what you want.</p></div>Andrewtag:service.skybound.ca,2010-06-18:Comment/450864352018-04-16T17:13:43Z2018-04-16T17:13:43ZTracking down width?<div><p>Thanks!</p>
<p>I never did find a point where things started working when clicking the breadcrumbs, but I did do bullseye on a long URL and was able to try your suggestion.</p>
<p>I've found other pages with other issues. One issue seems to be specific styling injected by the Acyba's AcyMailing "subscribe" when using contact forms.</p>
<p>Your explanations helped me figure that one out! They're injecting a "white-space: nowrap". I'll talk with them about that, as I'd rather get that implemented via their code, and others might have the same issue.</p>
<p>Also, it took a little while to figure out what the lock symbol meant when I was looking at the style! (Wish it had a tool-tip! haha)</p>
<p>I found that I can put two windows of different widths side by side. If they're the same URL, then I CAN see the updates in real time. That would be part way there at least.</p>
<p>The "Rulers" documentation on presets helps set this up!<br>
<a href="http://www.skybound.ca/help/productivity.html#rulers">http://www.skybound.ca/help/productivity.html#rulers</a><br>
(I know you know this, just putting it here in case someone else can benefit).</p></div>tabletguytag:service.skybound.ca,2010-06-18:Comment/450864352018-04-16T17:22:31Z2018-04-16T17:22:31ZTracking down width?<div><p>Glad to hear you're making progress.</p>
<p>Note that <a href="http://www.skybound.ca/help/productivity.html#bullseye">there is an explanation of the lock symbol at the bottom of this page</a>.</p></div>Andrewtag:service.skybound.ca,2010-06-18:Comment/450864352018-04-16T17:25:44Z2018-04-16T17:25:44ZTracking down width?<div><p>Thanks for the link to the lock symbol.</p></div>tabletguy