Coding help

• 

  letravelcollective · Member · Feb 7, 2018 at 9:58 am

  • Copy link
  • Add topic to favorites

  hey guys,
  I am having trouble increasing the size of my logo at the top of my page
  https://thelocalexplorers.com

  Does anyone know the CSS code for this?

  Thank you kindly in advance :)

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

• 

  bernardpotgieter · Member · Feb 7, 2018 at 10:36 am

  • Copy link

  Hi there thelocalexplorersaustralia

  If you what to learn more about code-ding.
  Go to this Webpage: https://www.w3schools.com/css/css_dimension.asp

• 

  yoga1103 · Member · Feb 7, 2018 at 10:45 am

  • Copy link

  Hi,

  Your theme ‘Penscratch 2’ prescribes the header size to be max 600 x 200.

  What size would you like the logo to be?

  you can try this Custom CSS code:

  .custom-logo {
      width: -webkit-fill-available;
  }

  It will stretch your custom logo horizontally to fill the whole width. You could edit the image to size 948 x 200 pixels, then it won’t look stretched.

  You could try with width value: max-content or fit-content, that would display the image with it’s width (656 px).

  In any case, the logo will look better, if you trim the height to 200 px.

  – best,

  – bests,

• 

  thesacredpath · Member · Feb 7, 2018 at 8:53 pm

  • Copy link

  Hi @thelocalexplorersaustralia, the following custom CSS will make your custom logo the widest it can be given the width/height of your original image.

  .custom-logo {
    max-height: 100%;
  }

  If you are wanting that image to span the full width, it would be better to actually redo that image to the suggested size for a header image of 937 × 300 pixels, and then use it as a header image instead of a logo. Logo’s aren’t typically designed to be full width.

  We can use the following, instead of the above, to force your logo full width, but it will lose quality and sharpness since we will be enlarging it past its full size.

  .custom-logo {
    max-height: 100%;
    width: 100%;
  }