Jump to content


Photo
- - - - -

How to display another background (type) on mobile devices?


  • Please log in to reply
8 replies to this topic

#1 ashrai

ashrai

    Member

  • Members
  • 15 posts

Posted 06 July 2012 - 01:45 PM

Hi there :) my fixed size large background doesn??t seem to work on mobile devices. Especially on my iPad it??s being scaled to fit the screen and my website looks awful. Perhaps there is away to disable the background or display it with different properties on mobile devices?

#2 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 06 July 2012 - 03:25 PM

These two topics may help:

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content

Alternatively, you can write custom code for the iPad, as shown in

Please Login or Register to see this Hidden Content



#3 ashrai

ashrai

    Member

  • Members
  • 15 posts

Posted 19 July 2012 - 11:29 AM

I try using custom css but it doesn??t seem to work :( After insatlling the specific css plugin, I try to deactivate the background for tablets, but my iPad still shows it. Has the .tablet command to bei whitin the {] oft the "body" css? What would be the proper code for deativating the background image and defining a new bg color for alle tablets and phones?

#4 ashrai

ashrai

    Member

  • Members
  • 15 posts

Posted 19 July 2012 - 11:41 AM

Okay, i figured out how to deactivate the bg and change the color. I needed to apply #page-main in front of the rest of the code. Also had to place #branding to hide the bg behind the branding and #nav for the navbar. Right now my code looks like this: .tablet #page-main{ background-color: #e7e2d5; } .tablet #nav{ background-color: #e7e2d5; } .tablet #branding{ background-color: #e7e2d5; } Can i combine this in some way? Seems a bit clumsy the way it is.

#5 Danny

Danny

    Is Awesome!

  • Moderators
  • 16952 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 19 July 2012 - 12:02 PM

Hi Ashrai, Read through this post it should assist you.

Please Login or Register to see this Hidden Content



#6 ashrai

ashrai

    Member

  • Members
  • 15 posts

Posted 19 July 2012 - 12:12 PM

Thanks - but how do I disable the background completely? Is there an easier way like the one I used?

#7 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 19 July 2012 - 01:07 PM

You can hide the background using CSS.

Please Login or Register to see this Hidden Content



#8 ashrai

ashrai

    Member

  • Members
  • 15 posts

Posted 19 July 2012 - 01:32 PM

Okay - and if I want that for page main, branding and nav? If I leave one of them out, the background picture only gets hidden partially. would it be #branding #page-main #nav .tablet {... } then?

#9 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 19 July 2012 - 01:44 PM

It should be the reverse:

Please Login or Register to see this Hidden Content