0

I'm experiencing an issue with small paragraphs. As you can see in the picture, i'd like the text to keep flowing down on the left column, but instead the paragraph jumps to the right. I believe this is something related of how the columns are "filled" but for what i see, column-fill property is not supported in Chrome. What alternatives do I have?

enter image description here

Relevant CSS:

#display {
    max-width: 120ch;
    min-height: 100%;
    column-count: 2;
    -webkit-column-width: 50ch;
    -webkit-column-gap: 3em;
    padding: 1em;
}
p,
.texto {
    margin: 3em 0 0 0;
    font-size: 1.25em;
    line-height: 1.25em;
    color: rgba(0, 0, 0, 0.8);
}

Relevant HTML:

<div id="display">
    <h4>Party Disbanded</h4>
    <h1>Cr&oacute;nica</h1>
    <p>14 de Goch del 1308 DGGP</p>
    <p class="texto">Text here.</p>
</div>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Gabriel
  • 5,453
  • 14
  • 63
  • 92
  • is this a `:first-letter` or an image ? if `:first-letter`, make it display:inline-block to avoid break through columns ... wee need what is related to the .texto class too (CSS) – G-Cyrillus Mar 30 '16 at 18:35
  • difficult to assume what the issue is from just this, can you please share more regarding the structure of your site? – AGE Mar 30 '16 at 18:36
  • set your `html`, `body` to `width: 100%; height 100%;` and `#display` to `height: 100%;` Right now what is making it work funky is the HTML structure of these elements. You may or may not find any more issues but for now that should do the job – AGE Mar 30 '16 at 19:02
  • @GCyrillus Merci. I added the display to the parragraph format, addind to the first:letter css had no effect. Added texto css code. – Gabriel Mar 30 '16 at 19:03
  • 1
    @Age thank you man. Please add your comment as reply and will mark it as correct answer. – Gabriel Mar 30 '16 at 19:07

1 Answers1

0

Set your html, body to width: 100%; height 100%; and #display to height: 100%;. Right now what is making it work funky is the HTML structure of these elements.

This will ensure your page expands to the full width and height of the view port, responsively as well. There is a lot of material online about this in case you are curious.

You may or may not find any more issues, since you need to consider what else is occurring on your website, but for now that should do the job.

Please ask in the comments below if you have any more questions.

AGE
  • 3,752
  • 3
  • 38
  • 60