How to Create the Responsive Web Screen?


I inserted a sequence of 7 buttons side by side, the problem is that it is not resizing when I change the screen configuration. When I use the Button Group it works great. 

How can I configure the screen to responsive?

Hi Alan,

See, I have created six buttons side by side without any config for responsiveness. What is your requirment.


Regards ,

Amreen


Hi Amreen,



I would like the buttons to resize automatically to the chosen screen size.

See in the screenshots that the widget button group representing the gray line (first / second ...) behaves as expected.

In fact, I wanted the entire screen to decrease or increase automatically.


Thank you for your attention.



Alan Cestaro wrote:


Hi Alan,

Name the class to a container containing all the buttons.


and try this css

.selector-class . btn {

margin-bottom:1.96%;

}


hope it will solve your issue.


Regards,

Pankaj

Hi Pankaj


See you Comparing the two images

each widget behaves differently according to the screen configuration.

If you create a webscreen application, can not it be viewed in a mobile environment?

Solution

Hi Alan,

If you want your Buttons to resize according to the screen size you should be using col or % as the unit for your buttons' width. That way they will be relative to the size of the screen (or the parent element).

Solution

Thanks Jorge.


Thanks Pankaj, Pedro  and  Amreen