Looking Good on Mobile Phones

Looking Good on Mobile Phones

Accueil Blog Looking Good on Mobile Phones
Everyone has a mobile phone!

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!  

Everyone has a mobile phone


How to make your website responsive?

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...

@media(min-width: 320px) and (max-width: 768px)


 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...

@media(min-width: 320px) and (max-width: 768px){
  .your-image {
    width: 100%;
  }
}
@media(min-width: 769x) {
  .your-image {
    width: 50%;
  }
}

Now the image will be full size on smaller screens, and half size on larger!



That sounds confusing!

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.

James Osguthorpe

18 June 2022

James Osguthorpe

Un conseil?

Appelez-nous dès aujourd'hui et laissez-nous vous aider dans votre projet.

06 73 41 60 54

Quelques articles utiles.

Lisez nos articles sur la conception de site internet et le développement de logiciels.
Why Avoid Website Builders  on laptop
Why Avoid Website Builders

Read our article on why you should avoid using Wix and GoDaddy

Rocket Fast Website Loading on laptop
Rocket Fast Website Loading

Read our article on why your website loading quickly is important

Send Google a Box of Muffins on laptop
Send Google a Box of Muffins

Read our article on how to get ranked high on Google search results

Google
Sally Coulthard
Sally Coulthard
Auteur de best-sellers
Professionnel, efficace, site internet facile à utiliser. Vivement recommandé.
Google
Oliver Pettigrew
Oliver Pettigrew
Producteur de film
Ils offrent une atmosphère incroyablement accueillante avec qui travailler.
Google
Edwin Appiah
Edwin Appiah
Créatrice entreprise
Le soin et l’attention aux détails tout au long du projet ont été sans égal.
Google
Rebecca Urry
Rebecca Urry
Gagnante marathon
Excellent service et soutien amical. Je le recommande vivement.