Increase overall width of site

• 

  jahworksradio · Member · Nov 4, 2018 at 2:47 am

  • Copy link
  • Add topic to favorites

  Hi,
  I’m new to CSS (actually just trying out a trial 30-day period ) and would really like to increase the overall width of my site. To start I would like to expand it so I could fit a header image that is 950 x 200 pixels. To be clear, I would like everything on the site to be widened equally to fit this size. Can anyone help me with this?
  Thanks,
  Dave

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

• 

  torres126 · Member · Nov 4, 2018 at 5:04 pm

  • Copy link

  Hi there,

  Is my understanding correct that you’re trying to achieve something like this? Does this CSS work for you?

  ` #page {
  width: 950px !important;
  }

  #sidebar {
  margin-left: 700px !important;
  }

  .narrowcolumn {
  width: 600px !important;
  }`

  Please let us know. :)

• 

  torres126 · Member · Nov 4, 2018 at 5:04 pm

  • Copy link

  Oops, please ignore those quotation marks.

  #page {
  width: 950px !important;
  }

  #sidebar {
  margin-left: 700px !important;
  }

  .narrowcolumn {
  width: 600px !important;
  }

• 

  jahworksradio · Member · Nov 5, 2018 at 8:14 pm

  • Copy link

  Yes, that worked, but now it is still limiting my header image to 760×200 pixels. Is there a CSS code that could help with this?

  Thanks so much!
  Dave

• 

  torres126 · Member · Nov 5, 2018 at 8:51 pm

  • Copy link

  Hi Dave,

  Are you trying to use the header you currently uploaded? I don’t think you need CSS to do that – I can’t really test this because I don’t have a Premium Plan, but I have a feeling it’s because the header you uploaded is 760 X 200 pixels.

  Here’s your header in 950 X 200 pixels: https://prnt.sc/lerdz4

  If that doesn’t work though, does this CSS? It’ll widen your site, but should mean the header will work if you upload the 950 X 200 pixels which I linked above. Currently, your site is using a cropped version. When you’re asked to crop the header next, please click “Skip Cropping”.

  #header {
  width: 950px;
  background-position: top;
  }

  #page {
  width: 950px !important;
  }

  #sidebar {
  margin-left: 700px !important;
  }

  .narrowcolumn {
  width: 600px !important;
  }

  That should give this effect, if you upload a version of your header which isn’t cropped: https://prnt.sc/lerj8p

  But please let me know if it doesn’t. :)