It is no surprise that everyone has a mobile phone these days - they're amazing! I'm writing this article on a mobile phone (in-between playing games). And with everyone having a mobile phone, it is even more important that your website works on one!
We can be pretty sure that someone will view your website on a mobile phone!
Since it is pretty obvious someone will view your website on a mobile, you need to make sure your website works when the visitor views it.
This can be very tricky, and requires time and attention to detail. You have a few options, but most common solutions are using CSS. If you're unfamiliar with CSS, then you're in for a long adventure, as CSS is what styles your website, but can also be used to change the style depending on the screen size.
If you're unfamiliar with CSS, you can learn more about it at W3 Schools. But for now, we'll assume you're comfortable making small changes in CSS.
CSS has a great feature called Media Queries. These are used to discover the screen resolution of the viewer. You can write a Media Query as such...
What this is saying is if the min screen size is 320px and the max screen size is 768px, then apply changes to a specific class. This could be the width of an image, so on a mobile the image would be full width, but on any other screens above 768px, it would be half the width.
It's takes some practice to understand, but give it a try. An example would be...
Now the image will be full size on smaller screens, and half size on larger!
Okay, so if CSS isn't your thing, you have a few other options. You can use a CSS framework to help you simplify things.
We love Bootstrap, which is a free framework that makes responsive CSS easier. Have a read of their documentations and see if this is useful for you. However, we believe you should always know the main code before working with frameworks. It is my advice that you learn CSS Media Queries, and then use Bootstrap to speed up the process.
As always, I hope you enjoyed read this article. Until next time.
18 June 2022
