Announcement

Collapse
No announcement yet.

Responsive Templates

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Responsive Templates

    A few questions about the new responsive templates.

    Currently I have makroffice-html5 installed and it is offering 2 listing templates. I would like to use one for smartphone and the other for tablet and larger. I would also like to block some of the product fields from smartphones and perhaps different ones from tablet and larger - if I can figure out how to use a different template hiding fields will be easy.

    Reason for the different template is just because I do not like how the 'tabbed' template looks at the small screen.

    Any thoughts?

    Thanks

    Rob
    Rob

  • #2
    With responsive design, you use one template. You use stylesheets to make the design change with each different width.

    This is accomplished with the media designation in your stylesheets.

    HTML Code:
    @media screen and (max-width: 600px) {
    **styles for screens up to 600px wide;
    }
    @media screen and (max-width:480px) {
    **Styles for screens up to 480px wide;
    }
    Then with CSS, you can display or hide every different ID or CLASS element by screen size. Think of it as stair stepping down from a full monitor to tablet landscape, tablet portrait, phone landscape and finally phone portrait.

    Does this make any sense?
    Jeff

    The Wedding Printer

    Comment


    • #3
      Thanks Jeff

      Yes it makes sense -- except when you are using the 3Dcart supplied tempates for listings. One of their templates works best on larger screens - the other on smaller ones...

      I just the skills to redo that much of the template to make it work best.
      ---------------------------------------------------------------------------------

      OK so I added some from one to the other - not the absolute best but better than either on their own - thanks again Jeff. Now on to the next problem...
      Last edited by Awesome; 02-24-2014, 12:52 PM.
      Rob

      Comment


      • #4
        I don't know which template you are using, but most of the 3dCart templates use the same listing_0.html. The only thing different is the stylesheets.

        If you were to document which styles are used on the product page, you could combine the two style sheets, into one. The large screen one for desk tops and the smaller one for tablet/phones.

        I have not tried this, but it should work.
        Jeff

        The Wedding Printer

        Comment

        Working...
        X