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

  1. Ryan
    Posted 1 year 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 1 year 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 12 months 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