How To Make My Website Responsive For Mobile Phones

How To Make My Website Responsive For Mobile Phones

Accueil Blog How To Make My Website Responsive For 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.
Read our Reasons Why You Should Avoid Using A Website Builder article
Reasons Why You Should Avoid Using A Website Builder
Read our How To Make My Website Pages Load Rocket Fast article
How To Make My Website Pages Load Rocket Fast
Read our How To Make My Website Show On Google Search Results article
How To Make My Website Show On Google Search Results
Sally Coulthard
Sally Coulthard
Auteur de best-sellers
Professionnel, efficace, site internet facile à utiliser.
Oliver Pettigrew
Oliver Pettigrew
Producteur de film
Ils offrent une atmosphère accueillante pour travailler avec
Edwin Appiah
Edwin Appiah
Créatrice entreprise
Le soin et l’attention aux détails tout au long du projet ont été sans égal.
Rebecca Urry
Rebecca Urry
Gagnante marathon
Excellent service et soutien amical. Je le recommande vivement.