Solved

align website in different resolution

Posted on 2014-11-21
5
87 Views
Last Modified: 2016-03-02
I have downloaded a Magento source and install the sample Madison Island. To my surprising,  the website can be fit into different resolution. On a small device, the menu and my layout can be fit into a way that can display properly on a iPad. Any idea how can it make this ?

Tks
0
Comment
Question by:AXISHK
5 Comments
 
LVL 4

Expert Comment

by:hulsebosch
ID: 40457662
Most common is the use of CSS.
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 250 total points
ID: 40457918
Look at a responsive framework like Bootstrap and have a read of my article

Otherwise you will need to write up all your own media queries to change the layout at the various resolutions.
0
 

Author Comment

by:AXISHK
ID: 40458803
Is there a good resource for using Bootstrap for a starter ?

One more question, how about resize a photo into different size ? Tks
0
 
LVL 58

Expert Comment

by:Gary
ID: 40458809
When using a responsive framework you very rarely use specific sizes for elements, instead using 100% width and auto height.
Good resource as a starter is in the comment above
0
 
LVL 109

Accepted Solution

by:
Ray Paseur earned 250 total points
ID: 40459405
Here is a responsive layout including an image that takes on a dynamic size depending on the browser viewport.  Use "view source" to see how it works.  Once you see how this works, go for Bootstrap and test it out!
http://iconoun.com/demo/grumpycat.html
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

816 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now