Make Website compatible with other devices [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
So my website is good on desktop, no problems. But when I look at it on my phone per say, the gallery page is very messed up. Now i haven't been able to figure out how to make it compatible! Help please, here is the website:
http://www.marbleddesigns.com/

Answer 1

Use mediaquery to make website display good on other devices, we call it responsive web design
#media (max-width: 767px) {
// Style for devices have width <= 767px;
}
#media (max-width: 1023px) and (min-width: 768px) {
// Style for devices have width >= 768px and <= 1023px;
}
#media (min-width: 1024px) {
// Style for devices have width >= 1024px;
}
You can add style for elements on your page.
I added simple responsive grid system here, you can copy my mediaquery css and add classes to your website to make it work well on other devices.

Answer 2

There is two main approach to make your website available and being responsive on multiple devices.
I/ when defining sizes of divs and more make sure to use percentage (%). This will make sure that the website adapts to the size of the screen and thus adapting to different resolutions. When thinking of creating a website always look on different browsers and devices to see if it looks good every where.
II/ The other option of course is using media queries. They are structure like this:
#media only screen and (max-width: 600px) {color:red;}
They basically apply a rule if a condition is met like the size of the screen usually in our example, the text would become red if the browser window is smaller than 600pw in width.
For some good tutorials i recommend those links:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
http://www.w3schools.com/css/css_rwd_mediaqueries.asp