How do I adapt my website pages to the phone ?

According to Hootsuite and We Are Socialaccording to Hootsuite and We Are Social, 55% of the world’s population uses the Internet, or nearly 4.2 billion people. The technological support that drains the most internet traffic remains the mobile with a share of 51.6%, followed by computers which show 44.1% against 4.3% for other supports. This implies that more than half of the Internet users access websites via their mobile. For this reason, your website creation project should take into account the fact of proposing an interface that adapts to different interfaces. Indeed, it is a question of making it responsive in order to enjoy the traffic coming from users not necessarily using a computer. To do this, I will guide you in the process of adapting a page of your website to the phone. This article, part of a long series, will show you ”step by step” all the steps so that you can do it yourself. Do not forget to follow the video that accompanies it and is likely to help you a lot.

Get “Responsive” pages!

Find out in this video

how to adapt your website pages to the phone:

What is a responsive website?

With the evolution of technology, a continuous number of people connect to the Internet. Most of them do it with their cell phone, that’s why your website must be perfectly adapted to the phone format in order to guarantee an optimized navigation experience to the users.

By the way, Mobify has found through a study that 30% of Internet users abort a transaction when a website does not adjust to their mobile format. Moreover, if a website takes more than 3 seconds to load, 57% of mobile customers tend to leave it.

For example, you will probably be annoyed by a website that forces you to zoom with your fingers, scroll up and down or left and right in order to read its content.

Therefore, a responsive website must be able to automatically adapt to the different media of the Internet users. And there are several reasons why you should switch to a responsive website.

Why you should have a responsive website?

There are many reasons to adopt a responsive website, but I reveal to you the most important ones that can have a great impact on your business.

Google recommends responsive websites

With more than 90,6 % of the world market share, Google remains the most used search engine by Internet users. It is therefore a reference in terms of user experience and the fact that it favors responsive websites is not by chance.

Indeed, the firm of Mountain View highlights in its search results, websites that adapt to the mobile format. In this sense, Google did not hesitate to set up the label ” Mobile Friendly in this sense, Google has not hesitated to set up the “Mobile Friendly” label in order to allow webmasters and site administrators to determine if the pages of their website are displayed properly on mobile.

In this logic, for a user who will make a search via his mobile, Google will take care to rank first in the results, the pages that are “Mobile Friendly” to the detriment of those who are not.

Improving your sales or contacts

Visitors are likely to automatically leave your website if they notice that the pages of your website do not display correctly on their mobile. Gold, 12.1 million

french people make purchases via mobile out of a total of 37.5 million who have purchased on the Internet.

This is why this category of Internet users is of great interest to you.

Your site easier to manage

In the past, it happened that some owners created two different sites, one for mobiles and the other for computers. This had the disadvantage of multiplying by two, the tasks related to the management of sites, content, etc. ..

For this, I suggest you to opt for a responsive website that will avoid all these troubles since it is only one site.

How to adapt my website page to the phone: steps for you to do it yourself

Site Web Twaino Agence SEO

In order for you to have a full understanding of the steps to take to adapt your website to the phone, I’m going to use my SEO Agency’s website,

Site Web Twaino Version ordinateur

It runs on the WordPress CMS and the theme I use is “Avada”.

Version ordinateur methode optimisee

First of all, please note that I have started a series of articles on how to create a website that you can consult depending on the stage you are at to create yours.

Version ordinateur optimisee

1) Check the display of your site on mobile

Site Twaino Slider revolution telephone

You can simply use your smartphone to see how your site looks on this medium, but you can also use the browser of your computer. To do this, you just have to reduce the width of your browser window by at least a third, while keeping its height.

When I do this for mine, I notice among other things on the home page that :

  • The title “Twaino: SEO Agency” is a little too big for a phone
Version telephone non optimisée
  • The layout of the images is not good because I have two images that follow each other and I will shift their position by putting them between each text;
Version telephone non optimisee
  • The arrows in the “SEO Campaign Methodology” do not fit horizontally, but follow each other vertically;
Version telephone non optimisee
  • There are large image squares in the “Blog” section, while carousels of two small ones could make the user experience more pleasant.
Version telephone non optimisee
Version telephone non optimisee

These are some of the changes I’m going to make. Follow along!

2) Log in to your website’s dashboard

To make the changes you need, you need to access the WordPress console.

To do this, you just need to add the entry “…./wp-admin” to the URL of your website in your browser. Mine is ” “.

Modifier les pages

On the connection page, fill in the boxes with your identifiers and then validate to access the dashboard.

3) Go to the home page

Once you are in your dashboard, go to the page you want to make responsive. In my case, it’s the homepage and once on it, click on the “Edit Page” window preceded by a pencil icon, located just to the right of “Create” and completely at the top of the page.

Modifier la page accueil

Once on the new interface, you will see all the blocks that make up your web page, thanks to the theme of your website. Mine is “Avada” and I will use this interface to make the different configurations

Les blocs de la page accueil

At this level, I suggest you duplicate in your browser, the window of the home page and reduce it. This will allow you to appreciate all the changes you will have to make as you go along.

Bloc Agence

4 Creating blocks for mobile or for computer and tablet

You will have to perform this action several times since you will create mobile blocks for all the blocks you want to modify. I will use the first modification I will make to illustrate it.

Indeed, if you have titles that are present on your page, it may be that their size is not optimized for display on a phone. This is my case with the title “Twaino : SEO Agency” which is too big and I will reduce its size.

4-1) Duplicate the block to be modified

To do this, find the block where the text is and click on it. The block I want to modify is “Agency” and I click on the small arrow on the right to see its content.

Création bloc agence pour mobile

I then advise you to duplicate the block by pressing the second icon from the left. This will allow you to create the block to be displayed on mobiles.

Modification blog agence

Then, name this new block so that you can easily find it. I put “Mobile Agency”.

Changement de nom agence mobile

4-2) Create the block intended only for computers and tablets

The first block you duplicated, which is “Agency” at my level, is the one that will be displayed on all media by default. You must therefore deactivate the option to display on phones.

Option du bloc

This action allows you to reserve only the first block for display on computer as well as on tablet and the second block, “Mobile Agency” in my case, for display on phone.

To do this, click on the edit icon which is the first one from the left. Then scroll down to “Container Visibility” which gives you three options:

20 Container visibulity selection

  • Small screen: For small screens including phones;
  • Medium screen: For medium screens including tablets;
  • Large screen: For large screens including computers.
Container visibulity

Since I want this block to be visible only on computers, I will deselect “small screen” and keep only “medium” and “large screen”.

22 deselectionner small screen

Then save this modification to continue.

21 Container visibility Medium Large

4-3) Create the block only for mobiles

24 Changement agence mobile

This is the same process as the previous step, except that here you will deselect :

26 Small screen uniquement

  • Medium screen
  • Large screen

Make sure that their color becomes gray, which will allow you to use the configuration of the second block, “Mobile Agency” at my level, for display on phones only.

25 Selectionner uniquement small screen

Save this modification so that it is taken into account. At this level, I advise you to always reduce the blocks that you do not use in order not to make mistakes. Indeed, if this is not the case, you risk making certain modifications in the wrong block and you will have to start all over again, which is not desirable.

5) Change the font size of your title

After these steps, you can now move on to the actual editing phase. To change the size of your text, drag your mouse cursor over the area where the text is displayed as a thumbnail. You will see an editing icon in the form of a pencil, which is in the first position on the left, which you will press.

27 Editer la partie texte

On the page that appears, you have a field containing your text and several options for its formatting.

28 Appuyer pour editer le texte

Then click on the “Text” tab in the upper right corner of the text field.

29 Changer le titre de la page pour telephone

You have the html format of your text and look for the word “font-size” followed by a number. This is the size of the text you want to change.

30 Taille du texte avant changement

At my level, I have “font-size: 50 px” which is on the same line as the title I want to change the size of, “Twaino: SEO Agency”.

31 Taille du texte apres changement

This indicates that the size of the title is 50 pixels, which I change to 40 pixels.

34 Nouveau visuel telephone apres changement

6) Move your images

There are two images that follow each other in the “Mobile Agency” block, which does not look good on the phone. For this, I will move one of them below the text that follows them. Here’s how to do it if you want to do the same.

32 Emplacement de limage

It is a very simple operation and once in the block, make a left click that you maintain on the frame of the image and drag on the area where you want to place it.

33 Modification place image

At my level, I drag it to the right and it takes the place of the second text, so I just placed it at the last position.

Save this change by clicking on the blue “Update” button in the bottom right corner. You can check if the configurations have been taken into account.

35 Changement image emplacement

To do this, I refresh the homepage of the reduced tab of my browser and the changes have been taken into account with a good rendering that is different when switching from a computer display to a phone display.

36 Relocalisation image

7) Arrange the layout of the shapes

In the “Method” block, I have arrows that fit well with the computer display, but give a different result for the phone.

37 Changement methode

To perform the same action as me, first duplicate and name it. In my case, I write “Methode Mobile” to differentiate it from the first one.

38 Creation page pour telephone

42 Image methode bloc apres changement

Then, as you did in step 4, deactivate :

  • The display on “Small screen” at the first block.
  • The display on ” Medium screen ” and ” Large screen ” on the new block.

This allows you to make the changes for the phone.

40 Sauvegarde du bloc

7-1) Delete the old arrows

Click on the small arrow on the far right to see the content of the new block you want to modify, “Methode Mobile” at my level.

41 Image bloc avant changement

I delete the other elements leaving only one, which will allow me to have all the content on the same line. To do this, you just have to click on the trash can icon that accompanies them.

7-2) Insert an image

Then drag your cursor over the image and press the editing icon in the form of a pencil on the left to make the various changes.

43 Edit image methode

On the interface that appears, select the “Edit” button which is located completely to the right and just below the image. This allows you to access the “Media Library” of your website.

44 Choix fleches methodes

You can select one of the images already in your library or upload a new image. At my level, I have already created a small image with the Adobe Illustrator software that I can use.

45 Sauvegarde des methodes

To do this, I click on “Upload Files” and then on “Select Files” to upload the image from my computer.

I take care to name the image and I press the “Insert on page” button. After saving by clicking on “Save”, I click on “Update” which takes into account my changes.

Once the home page is updated, I can see that I have the desired look.

46 Resultat methode

Keep in mind that at this level, we have just inserted a single image for the phone display instead of three different images for the computer display. Therefore, there will be only one link and one clickable image for the mobile display instead of three in the second case.

8) Create a cube of several well-structured images

In the “Services” block, the real display on mobile is skewed. Indeed, of the three images that follow each other below the banner “NATURAL REFERENCING”, only two appear.

47 Nos services avant changement telephone

To correct this, I will create a cube in which I will put the three images and a square image of “NATURAL REFERENCING”.

8-1) Create the new block

To make these changes that will only affect the mobile display, first proceed in the same way as in step 4. In other words:

  • Duplicate the old block;
  • Rename the new block;
  • Configure the display for both blocks.
48 Dupliquer le bloc service

In my case, I have “Service” as the old block and “Mobile Service” as the new block.

50 Visibilite pour telephone

8-2) Create a cube of 4 images

Click on the small arrow on the right to see the content of the new block. To get the result I want, I remove the banner of the “NATURAL REFERENCING”. Then I change the organization of the three images.

51 Bloc pour le service mobile

I click on the editing icon in the form of a pencil and I delete one of the images to have the two that will constitute a line of my cube. To do this deletion, just click on the trash icon that is on the same bar as the image name and save.

I finally have two images that I duplicate to have the second line of my cube. To do this, click on the icon that comes right after the pencil icon and is in the second position.

52 Changement des images

Adjust them so that the two sections are correctly aligned one below the other. Now change the duplicate images by putting the other two images in their place either from your “Media Library” or by loading it from your computer.

53 Allocation des images

I have now got my four images with my services:


8-3) Change the distance between the images

I save the changes and refresh the homepage to see the rendering. My cube with the four images appeared well, but the vertical distance is quite large.

56 Se rendre sur onglet design

To decrease it, press the edit icon in the first row of images in the “Mobile Service” block. Then click on the “Design” window, which is located in the middle of “General” and “Animation”.

57 Changement de margin

Enter in “Margin” a lower number, I filled in “-15%” at my level. Then save and refresh your page to see how it looks. Mine is perfect and I recommend varying the “Margin” to get the ideal result if you don’t have it all at once.

54 Resultat des services mobile

9) Add image carousels

In the “Blog” block of my website, I have large images that follow each other horizontally, which does not look good. For this, I will create lines with two images each.

69 Avant changement telephone partie blog

So I go to the “Blog” block and duplicate it to create the “Mobile Blog”. Use the same process described in step 4 to do this.

9-1) Choose the carousel and insert the images

Then open the content of the “Mobile Blog” block by clicking on the little arrow on the right. Then click on “+ Element” and look for the term “Carousel” in the bar reserved for this purpose.

63 Ajout du carousel pour images

The “Image Carousel” button will appear and you will click on it. On the page that appears, press “Select images” under “Bulk image Upload”, which takes you to your “Media Library” to select images.

64 Choix des images

In my case, I first take the two images marked “ON SITE” and “OFF SITE” for the “SEO” carousel.

9-2) Set up the carousel

After selecting the images, go down to the level :

  • From “Picture size” and press “Auto” to make the sizing automatic;
65 Taille des images automatiques
  • Hover Type” and select “Lift Up”;
66 Selectionner lift up
  • Autoplay” and check “No”;
67 Nombre de colonne 2
  • From “Maximum Columns” and choose the number you want. I use two for my images;
  • From “Show Navigation” and select “No”.
68 Selectionner le bon parametrage

I then save these modifications to see the rendering on the home page of my website.

The result is conclusive and to continue, you will remove the superfluous elements of your block. To do this, click on the trash can icons that are located just above the elements.

70 Apres changement telephone partie blog

9-3) Create more carousels

In case you want to add other image carousels, duplicate the first one you just made. This will allow you to keep the different configurations you have already made.

71 Images avant changement

After that, go and choose the images you want to put in place of the ones that are already there.

72 Parametrage images

And this, by clicking on the icon of edition which is present on each old image. This allows you to select the new images one by one.

77 Presentation blog avec images

At my level, I take the two images marked “ROBOT” and “USER EXPERIENCE” for the “Website Creation” carousel.

76 Selection correct image

I do the same for another image carousel by importing this time “WORDPRESS” and “WEBSITE”.

75 Choix image pour partie BLOG

I also take the opportunity to set the “Margin” of the “Design” parameter to “-19%” so that the distance between the images is small.

74 Selection du padding

9-4) Adjust the spaces

I save the changes and refresh the home page. The rendering is good, except for the space between the “Mobile Blog” block and the “Contact” block.

73 Choix images

To reduce it, click on the edit icon on the same line as the block name and click on the “Design” window.

Decrease or increase the “Padding” depending on whether you want to decrease the distance or increase it.

Feel free to go back and forth a few times to find the perfect fit.

78 Telephone apres changement partie blog

10) Check your changes one last time

You’ve just finished optimizing your website for cell phones. But to make sure that everything is working properly, do a final check. It consists in examining the final display on each support.

This will let you know if you’ve touched the widescreen display without knowing it. From there, you’ll know exactly what to do to fix the problem.

And that’s it! You’ve just adapted your website to the phone.


Currently, more than half of the Internet users use mobiles to connect to the Internet. Since this number is constantly growing, it is important to create a responsive website that automatically adapts to all types of media. This will considerably increase the user experience. A factor that is very important for Google which does not hesitate to rank in the first positions the responsive websites. I suggest you to follow the different steps that are presented in this article to offer the best experience to your users.

See you soon!

Leave a comment