Images and text formatting problem

  • I am trying to create a page that will have a header followed by a number of thumbnail images and then another header followed by a number of thumbnail images, etc. I would like the headers to be centered and the thumbnail images to be in rows of 4. But every time I try to format the images by having them aligned left, it then pulls the header below up to be in line with the images above it. I have tried putting in breaks by adding a
    code and have tried paragraph breaks <p></p>.

    Right now I have it so that almost all of the images are aligned left but the last one is floating and this seems to stop the header from coming up, but it also seems to result in 3 images per row and then other images added later floating below and not coming up into the rows.

    Here is the page: https://www.jbraider.dreamhosters.com/recipes-2/

    Ideas? Suggestions? I am not at all well versed in coding, etc. So please use basic language. ?? Thanks!

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

  • The best way I can think of to accomplish what you’re wanting to do is to create a class to add to the h1 (header) elements you want centered that will clear the CSS float property you added to the image thumbnails by aligning them left, and to align all the thumbnails left instead of the way you have it now (with some not floated left). The effect will be to tell the browser to “start over” when it renders the centered headings so it won’t try to float them to the right of the thumbnails.

    In order to do this, you would add a CSS class (call it whatever you want, just don’t use something that’s already in your style sheet), which in this example I’ll call “cleared”:

    .cleared {
  clear: both;
}

    If your theme allows you to add custom CSS, you can add this there; otherwise, you should create a child theme and add it to your child theme’s style.css.

    Once you’ve done that, edit the recipes-2 page and choose the “text” tab to edit the raw HTML in the editor. For each centered heading, you’ll see something like this:

    <h1 style="text-align: center;">Lunch</h1>

    What you need to do in order to use your newly created CSS class is to add the following so it looks like this:

    <h1 style="text-align: center;" class="cleared">Lunch</h1>

    Do that for each of the centered headings you want to fix, then switch to the visual tab in the editor and change all the thumbnails you set to align = none to align = left, save your updates, and you should be set.

    On my screen, it looks like the entry-content section is not currently wide enough to handle four of the thumbnails in a line, but you can attack that issue after fixing the alignment problem.

    Thread Starter hecatecat

    (@hecatecat)

    Got it worked out. Thanks!!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Images and text formatting problem’ is closed to new replies.