I am trying to use the minimum width and maximum width settings to help with responsive design on groups. This is my first attempt and finding something a bit confusing.
My idea was to set the minimum width of a container group to be equal to the smallest mobile device viewport width (on apple products it is 360 px). Also, I want to set the maximum width percentage to be equal to 1024 px so that the container group would stretch to fill the page on larger devices no matter what the viewport width is.
In my mind this would enable me to create container groups that stretch and shrink from a “base” size equal to the smallest viewport.
What I attempted was the following:
- Set my container group to have a minimum and maximum width
- Set a group to width of 1024 to test visually the responsivness of the container group and it’s ability to stretch to the max width percentage set.
- Set the page width to be 1024
The problem is that when I test this I don’t see the container group stretching to it’s maximum width percentage. (375 px multipled by 272% would be 1020px) Visually it is clear because the blue of the container group is not as wide as the red of the group with set width of 1024.
Any help would be appreciated.
My goal is to minimize the need to hide and show different groups of various sizes according to current screen size width; this is especially important for the repeating groups because as each container group is shown and hidden based on current screen width all the data is reloaded and causes serious time lag issues.