Adjusting title/logo size and centreing items on pages

  • I have two key questions:

    1. Reducing the size of site title/icon/logo on inside pages

    In the Arcade demo, the site title and icon are smaller on the inside pages as opposed to the front page. How exactly was this achieved?

    I have inserted a logo to take the place of the title+icon on my site, and I did manage to change the size of this on each of my inside pages with CSS. This then caused problems with how it fit in the mobile version, though again I was able to resolve this with CSS. The problem remains that I would have to update this for every new page I add. If there is no simpler way to adjust the logo size on the inside pages, is there a way to set one format type for the home page and another for all other pages?

    2. Centreing various items on pages

    Is it possible to move the title of a particular page to the centre of that page?

    Is it possible to move the contact form on a contact page to the centre of that page?

    The blog I need help with is: (visible only to logged in users)

  • 1. In order to control the CSS for something on the home page and on all other pages, I suggest using the ‘.home’ CSS selector like this:

    // inner pages
    #site-title {
       font-size: 28px;
    }
    
    // home page
    .home #site-title {
       font-size: 60px;
    }

    2. To center the page title you can use this:

    .page .entry-title {
       text-align: center;
    }

    3. Since your contact form has the ID ‘post-3’ you can use that as your CSS selector:

    #post-3 {
       text-align: center;
    }
  • Should that first block of CSS also work for the site description? For example, I’ve written:

    #site-description {
    	font-size: 17px;
    }
    
    .home #site-description {
    	font-size: 23px;
    }

    This worked to adjust the description size on the home page, but not on the inside pages. It only seems to adjust on the inside pages when I designate the page IDs.

  • Just checked out your site and it seems to be working. Looks like you had to use the important declaration to overwrite some other CSS that was added.

  • Yes I managed to get it working. Thanks for your help!

  • The topic ‘Adjusting title/logo size and centreing items on pages’ is closed to new replies.