My Website Looks Awful on Different devices, How Do I Fix it?

People view website on different devices, mobile, tablet, laptop, and desktop. Therefore, when designing or creating website, we have to take this into consideration to ensure it looks great on all devices.

When creating a new page, at the top you will see the available devices which you are building and optimizing the webpage for. As indicated by the screenshot below, the current view is desktop (notice the color highlight for desktop is darker)

When you click on the laptop icon, the following will be shown. It simply means current view is for laptop.

Now, when creating a responsive webpage, you want to click on each and every device to ensure it is optimized regardless of what devices your visitors use to view your webpage.

To select any device, double click on that particular device to select it. For example, to edit the website for mobile-only, I double click the mobile device. The mobile is now highlighted while the rest are not selected.

You have the option to optimize the webpage for multiple devices all at once. For example, if you double click on the laptop icon, all the devices from the laptop, tablet and, mobile are selected. (this is just an example but not recommended to optimize it this way as the laptop, tablet, and mobile as we know are different sizes. The best way is to optimize each device individually.

Check out this great video how to make your page fully mobile responsive.

To learn more on how to hide certain elements for different devices, check out this post

Was this helpful?

0 / 0