HELP – Full width logo not responsive!

  • Ryan

    (@pause-the-moment)


    10 years, 6 months ago

    Hi, I would like to know if it’s possible to add a full-width logo to the header area versus a smaller centered logo.

    I currently have a 960x122px logo that spans across the header but its not responsive and makes users have to scroll left/right when viewing on mobile/small screens.

    Any thoughts as to how I could keep it full width but make it responsive at the same time?

    Thanks a bunch!

    Ryan

Viewing 2 replies - 1 through 2 (of 2 total)

  • Make sure you are working in a child theme before making changes to your CSS.

    Try setting the image’s width to 100%. The height will change in aspect to the width as the image is resized with a browser. Just keep in mind that the image will be loaded at full size no matter what it is scaled to. I.e., I will still be downloading a 960px logo on my iPhone regardless of what it is scaled to. It may be better to use media queries with breakpoints for different screen resolutions.

    Thread Starter Ryan

    (@pause-the-moment)

    Thanks @smdaymeansnever.

    Question:

    When you say set the image width to 100%, do you mean in the stylesheet?

    Thanks,

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘HELP – Full width logo not responsive!’ is closed to new replies.