[resolved] Twenty Twelve Banner Doesn't Scale On Mobile! (11 posts)

  1. helloimvaughanedmonds
    Posted 3 years ago #

    Hey WordPressers!

    Does anyone know how to make your banner scale on the mobile version of Twenty Twelve theme? I wish I could upload a screenshot that would make this so much easier (sort that out WordPress if you are reading this).

    Basically the whole web page is in a thin column along the left hand side of my mobile webpage except for the banner which stretches out across the whole screen. It looks very odd.

    Anyone know a plugin or something I can do to fix this and make the page scale properly?

    If you have a mobile device check out the webpage at http://www.lovesvouchers.com


  2. Rev. Voodoo
    Posted 3 years ago #

    Have you changed anything within the theme? If not perhaps it is a plugin you are using?

    2012 works fine on mobile by default - you can check voodoopress.com for instance, my site running 2012

    There is no mobile version of the theme per se. It is a responsive theme, it just adjusts itself to fit the size of the screen you are viewing it from.

  3. helloimvaughanedmonds
    Posted 3 years ago #

    Ahh yeah looked at your website on mobile...it looks excellent.

    I'm using the plugin "WP Display Header" because this allows us to have different headers on different pages...I reckon that might be the problem...that somehow the responsiveness of the page has been killed.

    Any ideas of how I can keep the different headers and get responsiveness back?



  4. Rev. Voodoo
    Posted 3 years ago #

    Well, I would run a quick test. Shut off that plugin and test your site to make absolutely sure it is the plugin. With th eplugin off, the image should work fine.

    If that is the case, I would then approach the plugin devs to see what they might be doing that kills the responsiveness. That would be the simplest approach

  5. Michael
    Forum Moderator
    Posted 3 years ago #

    a line like this added to the styles might help to make the image responsive:

    #masthead a img { max-width: 100%; height: auto; }

    (not widely tested)

  6. helloimvaughanedmonds
    Posted 3 years ago #

    Hmm, I took off the plugin and the header still didn't scale properly?

    @alchymyth where exactly would I insert that line?

    Could it be another one of my plugins doing this (I have no idea why? I'm just throwing ideas out there)

    Thanks for your help! I really appreciate it.

  7. helloimvaughanedmonds
    Posted 3 years ago #

    Oh and again my site is http://www.lovesvouchers.com

    Check it out on a mobile device to see the problem.

  8. helloimvaughanedmonds
    Posted 3 years ago #

    Weirdly I've noticed that images and being responsive on the mobile site as well as Youtube videos. It appears just to be the header.

  9. WPyogi
    Forum Moderator
    Posted 3 years ago #

    You need to add custom CSS via a plugin to add the code alchymyth suggested - Custom CSS Manager is a good one.

    Hopefully you have not made any changes to theme files?

  10. helloimvaughanedmonds
    Posted 3 years ago #

    Sweet I did that and it's fixed!

    Cheers everyone who helped, I properly appreciate it.

  11. craven222
    Posted 2 years ago #

    Same problem for me on twenty-fourteen, the code alchymyth suggested didn't solve this.


Topic Closed

This topic has been closed to new replies.

About this Topic