Changing the background depending on the device.

JefCurtisJefCurtis Registered Users Posts: 14 Big grins
edited August 10, 2013 in SmugMug Customization
Hi All,

First post for me. My new Smugmug site is coming along but I cannot figure out how to change the background to a black or simple textured background when the mobile site is active. Right now when looking at the site on a PC or Mac I use a fixed background but it ends up tiling that same background when on mobile or tablet and it looks awful and hard to read.

www.boneheads.smugmug.com

Is there a way to change this? Any help would be great.

Thanks in advance!

Jef

Comments

  • jfriendjfriend Registered Users Posts: 8,097 Major grins
    edited August 3, 2013
    JefCurtis wrote: »
    Hi All,

    First post for me. My new Smugmug site is coming along but I cannot figure out how to change the background to a black or simple textured background when the mobile site is active. Right now when looking at the site on a PC or Mac I use a fixed background but it ends up tiling that same background when on mobile or tablet and it looks awful and hard to read.

    www.boneheads.smugmug.com

    Is there a way to change this? Any help would be great.

    Thanks in advance!

    Jef
    You can probably use CSS media query style rules to select a background image with CSS based on the current screen size.
    --John
    HomepagePopular
    JFriend's javascript customizationsSecrets for getting fast answers on Dgrin
    Always include a link to your site when posting a question
  • OsoOso Registered Users Posts: 164 Major grins
    edited August 4, 2013
    Hi Jef.

    I'm having same problem. I like my new site for desktop or laptop but on an iPad only a slice of photo is showing and looks kinda dumb. I read somewhere on SmugMug help pages there is no way of controlling how a background image appears on mobile devices but there should be way to over-ride as you say. Even Blogger offers different style for mobile and appears normal on tablet. Very disappointing SmugMug doesn't do likewise or is making it difficult to do.

    Steve
    [URL="Http://stevehymon.smugmug.com"]Http://stevehymon.smugmug.com[/URL]
  • JefCurtisJefCurtis Registered Users Posts: 14 Big grins
    edited August 6, 2013
    Oso wrote: »
    Hi Jef.

    I'm having same problem. I like my new site for desktop or laptop but on an iPad only a slice of photo is showing and looks kinda dumb. I read somewhere on SmugMug help pages there is no way of controlling how a background image appears on mobile devices but there should be way to over-ride as you say. Even Blogger offers different style for mobile and appears normal on tablet. Very disappointing SmugMug doesn't do likewise or is making it difficult to do.

    Steve
    [URL="Http://stevehymon.smugmug.com"]Http://stevehymon.smugmug.com[/URL]

    Hi Steve,

    Actually I did end up getting it to work with some CSS. I'm pretty sure something like this would work for you as well. I used a small texture image and tiled it when the screen size was small enough for say a smart phone but not a tablet or PC / Mac. Try that and see if it works. Mind you I'm no expert at CSS so I promise nothing!!

    Good luck with your new site.

    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {
    html.sm-user-ui {
    background-image: url( YOURBACKGROUNDIMAGE );
    background-repeat: repeat;
    }


    Love your website by the way. Great layout and beautiful shots!
  • paulbrockpaulbrock Registered Users Posts: 515 Major grins
    edited August 6, 2013
    Very handy, thanks!

    Sent from my GT-I9100 using Tapatalk 4 Beta
  • OsoOso Registered Users Posts: 164 Major grins
    edited August 10, 2013
    Hey Jef;

    Thanks for the kind words and for the code -- I tried it and it did work. I think big problem I was having was the image I originally chose had strong elements on far left and far right so never quite worked on iPad or iPhone screen. So...I just picked a different image!

    My site still acts up a bit on iPad but mostly works, which for now is good enough. My hunch is SmugMug is going to need a while to figure out all the bugs on their new site. I like my new site better than old, but I wasn't very pleased how they rolled the whole thing without much instruction for folk like me.

    Best,

    Steve
    SmugMug: http://stevehymon.smugmug.com
    Blog: http://stevehymonphotos.blogspot.com/
Sign In or Register to comment.