Need help? Check out our Support site, then


Tile Images to work on desktop and mobile

  1. jenniferbapties
    Member

    Hello there,
    I'm trying to center the images on my home screen, but it usually comes out uneven using the quick buttons. I even tried to use a td tr html code, but no luck. I'm want it to look like this https://www.genworth.com/ (well... kind of).

    They use div tags in CSS - is that something I need to add, or is there a faster way? and how do I do this?

    Any help would be greatly appreciated!

    The blog I need help with is jbbranding.com.

  2. For the Print, Branding and Web images, we can center those with the following custom CSS.

    .home .postarea p {
      text-align: center;
    }
  3. jenniferbapties
    Member

    That worked! Thank you.

  4. Hooray and you are welcome!

  5. jenniferbapties
    Member

    Sorry for reopening this issue so late. When centering my other pages this code seems to be a little stubborn. I've tried this, but no luck.

    .print .postarea p {
    text-align: center;
    }

    .contact .postarea p {
    text-align: center;
    }

  6. Hi, first off, on your Print page, if we center align, it will center align the text as well as the images, and center aligned text is much harder for visitors to read. Here is a good discussion on why that is.

    Only the "home" page has that particular type of CSS class in the opening body html tag. For other pages, you will need to view the source for the page, or use the web inspector built into your browser, and within the classes in the opening body tag, you will find a unique page id. For your Print page, this, in part, is what you will see in the opening body tag.
    <body class="page-template-default page page-id-100...
    To target that page, you would use page-id-100 like this.

    .page-id-100 .page .content {
    text-align: center;
    }

    If you are wanting the images centered on the Print page, edit that page and edit the images and change them from an alignment of "none" to "center".

    Also notice that we have to change the CSS selector since Print and Contact are not posts, but pages.

    For the Contact page, this are a bit different also since the contact form parent div goes full width, and also doesn't respond to the text-align declaration, so we would have to narrow the contact form parent div and then set the left and right margins on that div to "auto" like this.

    .page-id-19 .page .content {
      text-align: center;
    }
    #contact-form-19 {
      max-width: 500px;
      margin-left: auto;
      margin-right: auto;
    }

You must log in to post.

About this Topic

Tags