Support » Theme: Quark » Any way to have alternate banner for mobile?

  • Resolved anoctave


    Hi Anthony,

    I’m now using Quark to “recreate” a static site in WordPress. Obviously, the object is for the site not to be static any longer, but one of the requirements is that I use a header image that displays 1008 x 100. I have made the styling changes necessary to display the header that way, overriding the small size generated by the header options. Obviously, now, when I collapse the size the the screen, the image doesn’t fit into the smaller window, and a mobile device will not be able to see the entire header image.

    Is there a work-around for this?

    Here’s my WordPress/Quark beginnings

Viewing 11 replies - 1 through 11 (of 11 total)
  • Theme Author Anthony Hortin


    You’ve specified a fixed width and height on both the img tag and the h1 tag. If you want the images to resize automatically, you shouldn’t give them width or heights.

    I’ve commented out the width and height.

    The graphic is now the size meant for a mobile.

    I need to have the graphic full size for a pc/mac size browser window and have it the small size for mobile.

    Is there any way to do this? An alternate image? But how would it be loaded?

    Theme Author Anthony Hortin


    If you have a look at my demo site, which is running the default theme, you’ll see that the logo is full size when viewed on a desktop.

    As mentioned to you in one of your previous support threads, Quark uses a 12 column grid. If you’ve increased the size of the logo from the default, then you’ll most likely need to change the columns that you’re using as well.

    Also, I can see from your url above, that your header has a max-width of 1200px, whereas the other containers on your site are going full screen.

    I suggest that you start using something like Firebug (for Firefox) or Chrome Developer tools (for Chrome). These sorts of issues are extremely easy to sort out when using these tools and will not only save you a lot of headaches, but also speed up your development time.

    I tried Firebug and at this stage of my working on things, I found it confusing.

    So, I deleted my child theme and recreated it. Here’s what’s in my child theme style.css:

    Theme Name:     Water Works Conservancy
    Description:    website to promote the work of an edicational and historic preservation advocacy organization.
    Author:         barbara
    Template:       quark
    (optional values you can add: Theme URI, Author URI, Version)
    @import url("../quark/style.css");

    I have added nothing to the style sheet at this point. Here is the site

    As you can see, the graphic is miniaturized. The original graphic that I loaded as header graphic is 1009 x 100.

    When I loaded the graphic up, it appeared full size on the screen with a crop box superimposed. I clicked the button that said to ignore the cropping and accept the image as I had loaded it.

    So, at this point – at this iteration of my child theme, I have done nothing – no styling at all, no coding at all, and the image appears miniaturized.

    I went back to Fire bug and while some of the margin settings I would change, they don’t seem to be really affecting what’s happening with the image. I changed the column setting to grid_12_of_12, and I saw the box expand, but the image didn’t change. I went to the img code and, in the style sheet the controlling sizing is height-auto, width-100%. But that isn’t making the graphic it’s full size. So something else has to be controlling what happened to the graphic.

    Could it bee that whatever process is involved with the header/background/theme options selection is controlling this? I don’t see where I have any control over the internal workings of that process.

    What do I do now?

    Addendum to above:

    Interesting. When I right click on the minimized graphic and select View Image, it shows in its full size. So there must be someway to make this image work this way for the website. Full width for pc/mac computers, reduced width for mobile devices.

    I think I have it. Working with Firebug without the distraction of the changes I had made to the previous child style sheet made it much easier to see what was happening. Now I have to transfer the changes I made in firebug to my blank child style sheet.

    When I’ve confirmed that it works, I’ll post the changes I made here so that if anyone else has my problem, they’ll be able to fix it.

    Ok here are the changes I made:

    To the css file:

    h1 – made the top margin 0 to put the graphic at the very top of the page and margin bottom 0 (don’t know if the latter is important)

    site title h1 made the top margin 0
    site title img made vertical align – text top

    site header changed margin from 0 auto to 0 0 to put graphic flush with left side.

    To header.php

    All these things formatted the graphic once I got it enlarged.
    In truth, I don’t know what I did to make the graphic larger. I know I changed some css code but somehow it got messed up and I couldn’t find what I did the first time. The graphic was miniaturized again.

    However I noticed in the code that the size of the graphic was shown as height of 80 and width of 300. In Firebug I clicked on the size numbers and edited them to be blank. The graphic returned to it’s native size. When I miniaturized the screen, so was the graphic. So I think the easiest thing to do is suppress the width and height from the html code and the sizing will handle itself.
    Here’s the relevant code. Please tell me exactly what I have to delete from the code to suppress the h and w without destroyin the code.

    $headerImg = get_header_image();
    						if( !empty( $headerImg ) ) { ?>
    							<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />
    						<?php }

    If you can do that for me, I think I will be ok.

    Up above, where it says to header.php, I forgot to put that I changed the columns from 5 of 12 to 12 of 12.

    from above
    “However I noticed in the code” html code not css

    I’m so amazed that I did all this I’m having trouble being coherent.

    I did it!

    In the code that I quoted 2 or 3 comments above, I deleted the php code in between the paired quote marks for both height and width so that it reads height”” width””. That did it.

    Check it out: At full width the graphic is 1009 x 100; when you miniaturize the screen, the graphic miniaturizes. Perfecto!

    Thanks for bugging me about Firebug.

    Theme Author Anthony Hortin


    As mentioned previously, the site uses a 12 column grid. Yep, you’ve changed one of your columns to use 12 columns, but there’s still another container there with 7 columns. So basically, your site is trying to fit 19 columns. If you add any social media url’s into your Theme options, you’re gonna have issues as that last column is wrapping down to another line. If you look at the site in Firebug, you can easily see this.

    You either need to (A) remove the following code from your header to remove the social media icons altogether

    <div class="col grid_7_of_12">
       <div class="social-media-icons">
          <?php echo quark_get_social_media(); ?>

    or (B) change both of your columns so that they total 12. eg For example, grid_7_of_12 and grid_5_of_12 (7+5=12)

    If you want to use a bigger header image, change the following code in functions.php

    // Enable support for Custom Headers (or in our case, a custom logo)
    add_theme_support( 'custom-header', array(
       // Header image default
       'default-image' => trailingslashit( get_template_directory_uri() ) . 'images/logo.png',
       // Header text display default
       'header-text' => false,
       // Header text color default
       'default-text-color' => '000',
       // Flexible width
       'flex-width' => true,
       // Header image width (in pixels)
       'width' => 300,
       // Flexible height
       'flex-height' => true,
       // Header image height (in pixels)
       'height' => 80
    ) );
Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Any way to have alternate banner for mobile?’ is closed to new replies.