Twenty-Fourteen theme – footer CSS

• 

  squiressc · Member · Feb 7, 2022 at 9:57 pm

  • Copy link
  • Add topic to favorites

  Is it possible to edit the footer size and position on this theme. The footer is on the left margin, but I would like to centre it so that there is a margin on both the left and right (the footer is a different colour to the background).

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

• 

  kokkieh · Staff · Feb 8, 2022 at 8:01 am

  • Copy link

  Hi there,

  The footer is actually the full width of the theme. The problem is that the theme doesn’t fill the full width of your computer screen once you go past a certain width. You can see it if you inspect the HTML code for your site in your browser’s dev tools:

  https://d.pr/i/vs0OTX

  So you need to make the entire theme wider in order to make the footer wider. That will make the page content wider as well, which can have a negative impact on readability, so it’s better to keep that limited, as I did here:

  /* Make theme the full-width of the screen on larger screens while keeping content area at same width */
  @media screen and (min-width: 1260px) {
  	div#page.hfeed.site {
  		max-width: none;
  	}
  	div#main.site-main {
  		max-width: 1260px;
  	}
  }

  I’ve also wrapped that in a media query so this code will only have an effect if your site is viewed on a screen wider than the 1260px width the theme is set to by default. So this code won’t have any effect on smaller screen sizes.

  By the way, your plan gives you access to both live chat and direct email support for help with questions like these. You can reach those at any time by clicking the Help icon that appears bottom-right on all the My Sites pages, or else via the direct link at https://wordpress.com/help/contact

• 

  squiressc · Member · Feb 15, 2022 at 3:32 pm

  • Copy link

  Thank you so much, this has worked perfectly!