Home>

[Word press] I think that it can be arranged like an attached image.

Is there any way to write in CSS other than using the page builder?

I want to display the bottom of the image and text aligned.

For the time being, this layout is imaged on the pc screen without thinking about smartphone display.

I would like to challenge in a slightly complicated way, please lend me some wisdom.

  • Answer # 1

    It's easy to use Flexbox, so it's a good idea to investigate and challenge yourself.

  • Answer # 2

    You want to display it like this, right?

    The easiest way is to use table elements.

    1. Paste the following code in the post text to correct the text

    <table>
    <tr>
        <td>Insert left image (from add media)</td>
        <td>
    Please insert text here
    Please insert text here
    Please insert text here
    Please insert text here
    Please insert text here
    Please insert text here
    Please insert text here
    Please insert text here
    Please insert text here
    Please insert text here
    </td>
        <td>Insert right image (from add media)</td>
    </tr>
    </table>

    2. Add the following code to the theme CSS

    table.centertext {
        width: 100%;
    }
    td.tdside {
        width: 20%;
        vertical-align: bottom;
        text-align: center;
        border: none;
    }
    td.tdtext {
        vertical-align: top;
        text-align: center;
        border: none;
    }

    ・ Specify the width of the entire table as full width
    ・ Specify that the left and right parts in the table should be specified in width and the vertical position should be placed below. ・ Specify that the center of the table should be placed horizontally in the center and vertically in the top

    is displayed. Check yourself for details and adjustments on table elements and CSS.