WordPress.org

Forums

Quark
[resolved] logo displays outside the maxwidth of header (5 posts)

  1. cindy c
    Member
    Posted 1 year ago #

    Hi, I made my header & footer background images 1200px wide, and when I widen the browser window, the logo image that I uploaded is way off to the left. I can't seem to find the right css style to change. Can I limit the responsive maximum width so the logo displays over my header background image?
    Here is my site: http://djxstation.com/

    Thank you!
    Cindy

  2. Thimothe
    Member
    Posted 1 year ago #

    Hi Cindy,

    Can you provide more details on where you want the logo to appear? Quickly looking at your site, if you remove the left margin of your #masthead, it aligns the logo on the left edge of your "Bring the party with you" header.

    The custom css to achieve this is
    #masthead {
    margin:0;
    }

    If you plan on playing a lot with CSS, have a look at Chrome Developer tools or Firebug. They let you change CSS on the fly and inspect your page's elements.

    I hope this helps

  3. cindy c
    Member
    Posted 1 year ago #

    Thank you so much for your tips, Thimothe!

    I want the logo to appear over the background header image, no matter how much you enlarge the browser window. It needs to sit within that 1200px width, as if it were part of the header image. I can't put the logo right on the background image because I am using this WP install with Quark child theme to run 3 sites, all with the same header background image and layout but a different logo and content. I do want the site to be responsive, so the logo doesn't need to be absolutely placed. If you have suggestions for achieving this effect in another, feel free to suggest!

    I removed the left margin on #masthead in my child theme css, but it didn't bring the logo over onto the header image. I didn't find #masthead in the main Quark css stylesheet.

    I have been editing my css in Dreamweaver and uploading manually (my normal workflow outside of WP), and it's a pain. I can build this site outside of the WP framework easily, but the specs for this project call for WP, and I'm really struggling with the WP backend files and pieces/parts. I'll try Firebug and Chrome tools, thanks for the tip!

  4. cindy c
    Member
    Posted 1 year ago #

    I just saw my masthead outline in Firebug, which prompted me to try #masthead {margin: auto;} to center the div along with the header, and it worked! Then I added padding-left to the #masthead img to move it over, and success!

    Thank you so much for helping me! I'm really struggling trying to learn to build in WordPress. I think this Firebug will be a huge help. I am still making the edit in DW and uploading it, but now at least I can SEE the outlines of the elements and what's going on.

  5. Thimothe
    Member
    Posted 1 year ago #

    I'm glad it helped and congratulations with resolving the issue. Firebug is definitely a great tool for any webmaster.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic