It’s no secret that mobile devices are everywhere; according to https://www.oberlo.com/statistics/mobile-internet-traffic, 59.4% of Internet Traffic is from mobile devices. There are a few challenges to designing for a mobile device. For one, we (as designers) have to worry about file sizes again, due to bandwidth restrictions (dial up modem speeds, anyone?).
The other major challenge is the screen sizes. A website designed for a laptop/desktop generally has a lot of leeway in terms of the way things are laid out. For mobile, though, it presents some challenges and requires a new(ish) term: Responsive Design.
This is very easy to accomplish. It requires just a few lines of code to be added to your files.
First, the HTML file: Put this line in the head section of your document.
<meta name="viewport" content="width=, initial-scale=1.0">
Next, in your CSS file, add this line:
img { max-width: 100%; height: auto; }
The other part is with your CSS file, you’ll need to add two sections: One for small devices and the other for larger screens:
@media screen and (max-width: 479px) {
.UX_Buttons {
display: flex;
flex-direction: column;
}
}
@media screen and (min-width: 600px) {
.UX_Buttons {
display: flex; flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
}
}
If this css code is like Greek to you, please go to http://beyondthetutorial.com and look for the CSS course.