Adjusting your website for mobile view

How to set up the page view for various devices using the setting "Viewable Area."
Viewable Area is a setting that determines which block can be viewed via a certain device and which cannot. It is available in the settings of every block.
Why do you need this and how does it work?

If a block looks good on desktop, but not so good on mobile, then you need to set the viewing range for this block at 980px and more. This will make the block a desktop-oriented one, so it will not appear on mobile devices.

Then you need to copy the block and adjust its settings for mobile view (this may involve changing the image, font, etc.). Set the viewing range at 0-980px. This will get you the mobile version of the block.

In the end, users will see a desktop version when viewing via a PC and a mobile version when using their mobile devices.

The viewing range (varying option settings) helps you to adjust the appearance of a block for a certain device by choosing the resolution. For instance, some block may not look good on the tablet or certain cell phone model.
Let's look how we could adjust for mobile a cover, where the text is aligned to the left while the major object in the photo is placed on the right.
If we check it out on the phone, we will see the now cropped photo isn't doing very well.
So, the viewing range of this very block should be set at > 980px. It won't be displayed on mobile devices any more.
Copy the block.
Adjust the block for the mobile version: change the alignment of the photo and text.
This block's viewing range is now set at ≤980px. It will not show up on gadgets with screens wider than 980px.
Done! The cover is displayed differently depending on the screen width.
Examples of screen width for various gadgets:
iPhone5 — 320px
iPhone6 — 375px
iPhone6+ — 414px
iPad — 1024px
Samsung Galaxy — 360px
Nokia Lumia — 320px
Made on