3-column coding for single page

  • RossB

    (@rossb)


    10 years, 3 months ago

    Hi folks. The single page the title refers to is the ‘Movie Review Archives’ page of my blog. I am using a Twenty Fourteen child theme.

    I’ve used some basic coding from this site to create a 3-column layout.

    I have 2 problems, as follows:

    1. I want to have the columns spaced wider apart and spanning further across the page.

    2. I have arranged the movie archives in 3 separate ‘blocks’, each comprising the same 3-column layout, but the only way I can keep the ‘blocks’ separated with a space is via a dotted line. If I remove this, the bottom ‘block’ moves up to fill the empty spaces of the ‘block’ above. I have tried various coding options I came across when researching how to “properly” separate the ‘blocks’ with a blank space, but none have worked.

    If anyone who is not such a coding hillbilly as I (which means just about anyone!) can help, would be appreciative.

    Cheers
    Ross

Viewing 5 replies - 1 through 5 (of 5 total)
  • neotechnomad

    (@neotechnomad)

    10 years, 3 months ago

    HTML… (put in your page)

    <div id="column-wrapper">
<div class="single-column">
(...put stuff in here)
</div>
<div class="single-column">
(...put stuff in here)
</div>
<div class="single-column">
(...put stuff in here)
</div>
</div>

    CSS… (put in your child theme CSS – styles.css)

    #column-wrapper {
width: 100%;
height: auto;
margin: 20px auto;
text-align: center;
}
    .single-column {
display: inline-block;
vertical-align: top;
width: 28%;
height: auto;
margin: 0 2%;
text-align: left;
}
    Thread Starter RossB

    (@rossb)

    10 years, 3 months ago

    Thanks a lot, NeoTechnomad. Have followed your recommendations.

    However, the columns still don’t stretch across the page, and still aren’t separated any more than before. Perhaps I need to alter something in the CSS (or add something)?

    Also, how would I add a break between the end of one lot of columns and the beginning of the next, please?

    Would also like more of a break between the last set of columns and the “Other movie-related posts” heading. I’m sure this is easily done, but have tried <br><br /> and it made no difference.

    Cheers!
    Ross

    neotechnomad

    (@neotechnomad)

    10 years, 3 months ago

    However, the columns still don’t stretch across the page,

    It is because the wrapper for the page is not full-screen and you have a sidebar on the left-hand side.

    The other question is: do you want just this page to have the 3 columns or all pages?

    and still aren’t separated any more than before.

    The width can be decreased and the margins increased.

    Also, how would I add a break between the end of one lot of columns and the beginning of the next, please?

    Would also like more of a break between the last set of columns and the “Other movie-related posts” heading. I’m sure this is easily done, but have tried

    and it made no difference.

    These are now some pretty complex changes that I think you should have a designer who can look at the child theme and the site and code exactly what you need. Without actually accessing your child theme, what you are asking is beyond the scope of working from the forum.

    You could search or post at these sites for someone: WordPress Jobs, Code Poet, or Upwork.

    Thread Starter RossB

    (@rossb)

    10 years, 3 months ago

    Thanks for your further response, NeoTechmad.

    I want just this page to have the 3 columns. If I could make this page full-screen and/or get rid of the sidebar just for this page, I think that’s about all I need to do. Is it easily possible to achieve that, please?

    Now that you’ve kindly provided me with the coding I should have been using from the outset, I think I can probably figure out a way to increase the separation between the sets of columns, even if it’s not the optimal way. I have another site with boxes on one page, for example, and am thinking I could simply adapt that box coding to achieve the separation I want by having an empty, borderless box in between the sets of columns. Can but try…

    Cheers
    Ross

    Thread Starter RossB

    (@rossb)

    10 years, 3 months ago

    For the benefit of anyone who might stumble on this page looking for a simple way to widen a specific page, I managed to do it as follows:

    First, find the ID of the page.

    Then, add the following CSS to your stylesheet:

    .page-id-231 .entry-content {
max-width: 800px;
}

    Done!

    Now, to solve the remaining problem as per my post above – to increase the blank space under each set of 3 columns on the page to which I refer. If anyone has any suggestions, I’m all ears and gratitude!

    Cheers
    Ross

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘3-column coding for single page’ is closed to new replies.