Mobile Site redirect

MonkeyHipsandRiceMonkeyHipsandRice Registered Users Posts: 30 Big grins
edited January 29, 2014 in SmugMug Customization
Greetings all,

Some the things on my site are best for computers/laptops and just won't display right on mobile devices such as the way I did my pricing. I am going to create a separte mobile site within my site and I need some code to redirect customers based on what device they are viewing my site on. So if they are using a phone/tablet it will redirect them to a differant homepage and menu system. This will allow me to get fancy and not so fancy on mobile for speed:D Is this possible? What code would I use to accomplish this?

Thank you!

www.TimothyFernandez.com

Comments

  • denisegoldbergdenisegoldberg Administrators Posts: 14,373 moderator
    edited January 26, 2014
    I don't think this is exactly what you are looking for as it isn't a redirect, buy maybe you will find this customization by leftquark useful - http://www.aaronmphotography.com/Customizations/Sitewide/Screen-Width-Customizations.

    You didn't ask for feedback, but are you aware that some of the lines of text in your pricing section overlap? I see this under "Your Story" on the main pricing page and in the "Cozy" presentation as well.

    --- Denise
  • MonkeyHipsandRiceMonkeyHipsandRice Registered Users Posts: 30 Big grins
    edited January 26, 2014
    I don't think this is exactly what you are looking for as it isn't a redirect, buy maybe you will find this customization by leftquark useful - http://www.aaronmphotography.com/Customizations/Sitewide/Screen-Width-Customizations.

    You didn't ask for feedback, but are you aware that some of the lines of text in your pricing section overlap? I see this under "Your Story" on the main pricing page and in the "Cozy" presentation as well.

    --- Denise

    Thanks I will check it out!

    I always apprciate feedback =). Your trying to help and I thank you for that! I think I figured out why it was doing that on some lines and not others. I would see it on some monitors and not others. It had to do with screen size. So I think I fixed it at least for all the screens in my house I checked it on =)
  • MonkeyHipsandRiceMonkeyHipsandRice Registered Users Posts: 30 Big grins
    edited January 26, 2014
    I am trying to fix my pricing for smart phones and tablets. The code does not seem to change that. I hate to throw all that work in the garbage as I think its pretty cool but fuciton over style. I may just add a mobile section to my pricing. I just want to make it easy for you no matter what your viewing it on.
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited January 27, 2014
    There is no way to use CSS to redirect to a new page. It only effects the style of a page and not what page is loaded.

    However, there is a very simple way to do what you want to do and it's exactly as Denise mentioned.

    Basically it looks like what you've done is created 2 separate pages with 1 HTML blocks in them, each. Why not have 1 page with both HTML blocks in them, and then hide one based on the screen size?

    For example, for mobile, you'd use this code to hide the big block you use for the full site:
    /* MOBILE SITE */
    @media only screen and (max-width: 640px) {
      /* Hide the full side widget */
      .sm-page-widget-[COLOR="Red"]2130363[/COLOR] { display: none; }
    }
    

    And for the full site, you'd hide the mobile widget:
    /* FULL SITE */
    @media only screen and (min-width: 641px) {
      /* Hide the mobile widget */
      .sm-page-widget-[COLOR="red"]4758771[/COLOR] { display: none; }
    }
    

    Just make sure to grab the correct widget ID number's from your code (highlighted in red).
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited January 27, 2014
    Also, it looks like you've made empty galleries and just populated the Gallery Description with your HTML. This is how it was done in the Legacy (old) smugmug and is a bad idea for the New SmugMug. Instead, create a "Page" (not a Gallery") and drop an HTML block with your code. That way you don't have the "empty gallery" box at the bottom of all your pages.
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • MonkeyHipsandRiceMonkeyHipsandRice Registered Users Posts: 30 Big grins
    edited January 29, 2014
    leftquark wrote: »
    Also, it looks like you've made empty galleries and just populated the Gallery Description with your HTML. This is how it was done in the Legacy (old) smugmug and is a bad idea for the New SmugMug. Instead, create a "Page" (not a Gallery") and drop an HTML block with your code. That way you don't have the "empty gallery" box at the bottom of all your pages.


    THank you very much for your help!! I was having trouble using pages due to my browser. I used a differant one now. I did as you suggested. I made a page with both html blocks in them. two separet html blocks on the same page. I am having trouble getting it to work. I don't understand about the widget code and how to set this up exactly. Could you explain just alittle bit?

    Kind Regards,

    Timothy
Sign In or Register to comment.