How to Mobile Optimize the Page

Before starting the Mobile Optimization of the page, have these 4 Points clear in your mind


1. Use Style Setting


Let's first go to Mobile view 

Then, Go to Gear Setting of any element (For example Headline Element) > Pencil Setting > Text Setting

Here on, make changes to the Headline that you want

As you can see in the below image, We make the Headline text size to 45 px



But the changes won't disturb the Desktop Version. As you can see, in Desktop, Text size is 56 px



So. Like this in Mobile mode, you can make as many changes


2. Use INLINE BAR to make specific changes to Texts

 Inline Bar is mostly used to make changes for specific text. For Example, I want to give underline just to "Software" word so I will copy it and click on underline from Inline Bar 

And it will reflect in Mobile view too 


But If I have to give an underline to the whole Text, then I will use Style Setting 

3. Spacing- Margin and Padding 

So, before optimizing the page. Let's understand the difference between the two - that is Margin and Padding

Margin is basically when space is given outside the element/row/section

and Padding is when space is given inside the element/row/element

in the above image, Padding is the green space that is given inside the borders 



in the above image, the Margin is the large black shadow rectangle that is shown in the image outside the borders of the image element 

Here is the Clue - to see the padding and margin of any Element/Row/Section - choose another element, then hover on that Element to see the spacing

Now, you got the logic of the margin and spacing, Just we have to go to Mobile view and increase/decrease the spacing from the style setting as we want.

NOTE - Don't use spacing and advance setting too much that it disturbs the mobile view so much and you get lost in that to find what I have done.


and if you using it , then please make changes in both desktop and mobile view as you don't get confused when you come back again after making the whole page in desktop view.


4. Last Bonus Tip

to do Mobile optimization of your page more better 

keep

Headline - 30px-36px
Sub Headline - 23px to 26px 

Normal Text -18px to 20px

We hope you enjoyed this Article, and will help you in your online journey to make your page mobile responsiveness.