Responsive Webpages

[JuicyPea]

I am wondering how to make my webpages responsive for a mobile phone. I would like this page >> http://www.goinginstyle.com/Design-Go-T ... ories.aspx to be responsive like this page >> http://www.goinginstyle.mobi/pages/desi ... ccessories

I am new to able commerce and new to html so an example page would be helpful so I could look at the source code and see how to design a responsive webpage.

[nadeem]

If you are using Ablecommerce responsive theme, it is super easy to write your HTML following the responsive rules. Ablecommerce responsive theme in Gold R10 is based on the bootstrap responsive design. Here is a sample HTML to make your page responsive in Ablecommerce:

Code: Select all

<div class="container">
      <div class="row">
        <div class="col-md-4">
          <h2>Heading One</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus urna, elementum eget imperdiet a, luctus ultrices augue. In quis ullamcorper leo, a luctus eros. Pellentesque ultricies arcu non massa finibus posuere. Phasellus imperdiet, felis a gravida consequat, eros felis consequat tortor, gravida pretium ligula ante vitae nisi. Sed ante felis, convallis sed posuere eget, efficitur nec quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed malesuada cursus risus non dictum. In luctus urna ligula, a volutpat augue lobortis non. Quisque id augue dapibus risus tincidunt scelerisque eget at ex. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
          <h2>Heading Two</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus urna, elementum eget imperdiet a, luctus ultrices augue. In quis ullamcorper leo, a luctus eros. Pellentesque ultricies arcu non massa finibus posuere. Phasellus imperdiet, felis a gravida consequat, eros felis consequat tortor, gravida pretium ligula ante vitae nisi. Sed ante felis, convallis sed posuere eget, efficitur nec quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed malesuada cursus risus non dictum. In luctus urna ligula, a volutpat augue lobortis non. Quisque id augue dapibus risus tincidunt scelerisque eget at ex. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
       </div>
        <div class="col-md-4">
          <h2>Heading Three</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus urna, elementum eget imperdiet a, luctus ultrices augue. In quis ullamcorper leo, a luctus eros. Pellentesque ultricies arcu non massa finibus posuere. Phasellus imperdiet, felis a gravida consequat, eros felis consequat tortor, gravida pretium ligula ante vitae nisi. Sed ante felis, convallis sed posuere eget, efficitur nec quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed malesuada cursus risus non dictum. In luctus urna ligula, a volutpat augue lobortis non. Quisque id augue dapibus risus tincidunt scelerisque eget at ex. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
      </div>
    </div>

You may also have a look here http://getbootstrap.com/getting-started/ to know more about bootstrap.

[mazhar]

It looks like you are using static HTML for this page. If I am correct then this page will be listing items from a category. In this case you can choose a suitable category display page like Category Grid (Deep Item Display). If you don't want to have sidebar then you can choose one column layout for display page in admin panel. By default category pages are responsive so it will collapse on small screens just like your .mobi page.