Dara theme, header image width

  • I’m using the Dara theme on my website and having trouble getting the header image to stretch all the way across the screen for full width.

    This is the site I’m working on: http://www.nationalcattledog.org

    What I’ve done so far is to insert a CSS command to set the site width to 100% and that works on everything but the header image.

    .site {
    min-width: 100%;
    }

    If I inspect the elements on the page and edit the code as HTML in there, by setting the width to 100% instead of 1180px, then the image behaves as I’d like it to. But, I cannot get it to work using any CSS commands so far.

    The element is either ‘site-header’ or ‘custom-header’ and I’ve used this code on both to no avail.

    .site-header {
    min-width: 100% !important;
    }

    .custom-header {
    min-width: 100% !important;
    }

    Any suggestions would be welcome, I’m about to give up on this theme unless I can get this last issue fixed.

  • Hi there,

    Your site is not hosted with us on WordPress.com, but using the open source WordPress.org software at another hosting provider.

    You can find the support forum for the self-hosted version of Dara here:

    https://wordpress.org/support/theme/dara/

    You’re restricting the minimum width the image can have, but you’re not increasing the maximum width, which is a fixed value in this theme. Add this:

    .custom-header {
      max-width: 100%
    }

    For more help with this, please post in the forum I linked to above.

  • I got it figured out, but I’ll finish out the thought for anyone else that might have the same issue, either now or later

    I already tried what you suggested and it doesn’t work. As soon as I set the max-width to 100%, then the goes back to the original width. Setting the min-width is the only thing that works on any of it.

    What did work was this:

    .custom-header img {
    min-width: 100%
    }

    Thanks for the help….

  • The topic ‘Dara theme, header image width’ is closed to new replies.