Posted on

In the digital age, smartphone become a norm to most of people. The site needed to be responsive so that users can browse easily without the needed to zoom in.

We have many different sizes of the phone including tablet. So to have responsiveness we will detect the width of the open applications. In Desktop browser you can check the size accordingly, or you can emulate the phone. Right click at your browser and choose Inspect Element

Click at the 2 rectangles beside the pointer
You can choose which type of device you want to emulate

Now come the tricky part. The code for the CSS.

To enabled the view of mobile ration first we must enable the viewport set to 1 in the initial width. Add below code in the <head>

<meta name="viewport" content="width=device-width, initial-scale=1">

Now once it done in the CSS you can check the width by using @media. Specify the max width based on the device. Below are the example of the style been done.

.example {
  background-image: url("https://example.com/image.jpg");
@media only screen and (max-width: 700px) {
  .example {
    background-image: none;

This code will allow the background image not to be shown if the width of the device/browser less than 700px. You can see example of this in here

You can resize the browser to see the changes.

Original size more than 700px
Mobile view: Less than 700px
Please follow and like us:

Leave a Reply

Your email address will not be published. Required fields are marked *