HELP - Full width logo not responsive! (3 posts)

  1. Ryan
    Posted 2 years 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!


  2. smdaymeansnever
    Posted 2 years ago #

    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.

  3. Ryan
    Posted 2 years ago #

    Thanks @smdaymeansnever.


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


Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic