Viewing 13 replies - 1 through 13 (of 13 total)
  • The misalignment is because you have some of those divs floated right and some floated left — but not in a logical way. So check on that. You’d really be much better off keeping the CSS in the external stylesheet, not in the HTML code.

    Thread Starter befree22

    (@befree22)

    And how do I create the css for this? In other words, what code do I use in the page and what code do I add to the css to fix this problem?

    I tried adding this https://www.codemiles.com/html-examples/creating-table-using-div-tag-t8639.html in the page but the lyrics appeared as paragraphs instead of lines of text.

    WordPress themes generally have some built-in CSS, so you would generally just use those classes already in your theme to set the alignment. For example, this CSS code is in the theme:

    .alignright {
       float: right;
    }

    So then in your div, you would put <div class="alignright"> which would float that div to the right. In your page, you would likely also have another custom class for the width so those divs fit side by side.

    But trying to explain extensive basic CSS and HTML is really beyond these forums. I can only suggest that you do some reading about how CSS and HTML work – there are many good tutorials, including videos out there that will be helpful. This is also a good site:

    https://www.w3schools.com/css/

    Furthermore, it appears that you are using a commercial theme — which is not supported here, so you might also try asking the vendor for help.

    Thread Starter befree22

    (@befree22)

    I am fixing the page because it’ll be a 2012 child theme (I love native WordPress) so I’ll be ditching the current theme in a few days.

    OK, would it be fine then if I add this code to the page…

    <div class="alignleft">INSERT LYRICS HERE</div>
    <div class="alignright">INSERT LYRICS HERE</div>

    so I’ll have 2 columns for lyrics.

    and in the css, add this:

    .alignright {
       float: right;
       width: 48%;
    }

    Not quite because you really do not want to change the existing `.alignright’ — because it is used elsewhere in your site. That will completely mess up other elements. You would likely need to create a custom CSS — for example:

    .halfwidth {
       width: 48%;
    }

    then add that class to the divs

    <div class="alignright halfwidth">

    Thread Starter befree22

    (@befree22)

    So the divs would be…

    <div class="alignleft halfwidth">
    <div class="alignright halfwidth">

    …correct?

    FYI: The alignright w/ 48% css code works — all except 1 of the song lyrics are in 2 columns (see webpage). Maybe the div you just shared will fix the 1 song lyrics.

    Yup, this should do what you want.

    Thread Starter befree22

    (@befree22)

    After switching to .halfwidth css, all song lyrics aligned in 2 columns except for 1 “Wanna Be Free”. View webpage.

    So I switched the <div class=”alignleft halfwidth”> and <div class=”alignright halfwidth”> div tags in some lyrics and Voila! It works perfectly.

    Thanks so much for your dedication to WordPress WPyogi.

    Thread Starter befree22

    (@befree22)

    It works!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Thanks WPyogi.

    Thread Starter befree22

    (@befree22)

    Umm…

    FYI: The help WPyogi offered above was for a commercial theme but the current theme is permanently switched to a 2012 child theme on this site.

    I’m having the same issue with the 2 column layout on this 2012 child theme, namely, the lyrics aren’t appearing in 2 columns. I adjusted the font size but the lyrics still aren’t appearing in 2 columns (view page).

    Since I’m using a 2012 child theme, do I have to continue using halfwidth div? What css will work with the child theme to align the lyrics into 2 columns?

    Did you add the halfwidth class to your CSS anywhere? Does not look like it.

    Thread Starter befree22

    (@befree22)

    OK, I just added the halfwidth class to the css and all of the lyrics are in 2 columns. ??

    Now, the current font is 10px and I changed it to 16px, so it’s quite readable now. Thanks again.

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘format text on page’ is closed to new replies.