CSS To Resize Custom Logo

  • Resolved mayhemkrew

    (@mayhemkrew)


    7 years, 5 months ago

    I was wondering if there is some type of CSS code I can insert that can automatically resize my logo depending on the users resolution. When on mobile or tablet, my logo is too large, but on most desktop resolutions it’s fine. Any input is appreciated! Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Theme Author Lana Codes

    (@lanacodes)

    .header .custom-logo {
   display: block;
   max-width: 100%;
   height: auto;
}

    This CSS code helps with image responsiveness.

    I hope I could help. If you have any questions, please let me know.

    Thread Starter mayhemkrew

    (@mayhemkrew)

    Thanks so much! It worked perfectly! Do you have a recommended logo dimensions to be used?

    • This reply was modified 7 years, 5 months ago by mayhemkrew.
    Theme Author Lana Codes

    (@lanacodes)

    This completely depends on your logo.

    The recommended width is 300-500px (but maximum 1140px).
    The recommended height is 150-200px.

    Thread Starter mayhemkrew

    (@mayhemkrew)

    I guess the reason why I am asking is that my current logo is 1000×200 but yet on my desktop it doesn’t span across the “boxed” news articles. However on mobile/tablet it looks great.

    https://www.catchmehooking.com

    I appreciate all the help so far. Thanks.

    Theme Author Lana Codes

    (@lanacodes)

    Oh yes because you have
    Header > Site Title Position > “Left”
    in Customize.

    Please modify to “Center”, because in this case the logo container is in full width.
    Adjusted to the “Left” only 50% width.

    Thread Starter mayhemkrew

    (@mayhemkrew)

    Perfect! I got it now. Thanks again! Love the theme too!

    Theme Author Lana Codes

    (@lanacodes)

    I was happy to help you. I wish you great success for your website.

    If you rating my theme, you will help me a lot. ??

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘CSS To Resize Custom Logo’ is closed to new replies.