How to make an object flexible?

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
Hobbyist
 
 
Posts: 82
Joined: Mon Apr 16, 2018 6:37 pm

How to make an object flexible?

Post by Hobbyist » Sat May 25, 2019 8:43 pm

I used the Flexgrid layouts and thought I placed the objects within the layout. When viewed on a smartphone it turned out some objects were not flexible. How do you change an objects properties from not flexible to flexible?

I found the enable "responsive fonts" for text and read the basic tutorials.

User avatar
Pablo
 
Posts: 22148
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: How to make an object flexible?

Post by Pablo » Sun May 26, 2019 7:37 am

You can use the 'flexbox' propertie' to change the behaviors of object inside a flex grid or flex container.
Image

For example set the flex grow / flex shrink to: 1 to make it full width.

See also this related tutorial:
http://wysiwygwebbuilder.com/flexbox.html

Hobbyist
 
 
Posts: 82
Joined: Mon Apr 16, 2018 6:37 pm

Re: How to make an object flexible?

Post by Hobbyist » Thu May 30, 2019 3:10 pm

I tried this. It did nothing to align the Text and other objects with the Flex Grid. The text did move but not with the Flex Grid. It also did not align as the tutorial says it will. Choosing center, flex start, flex end honestly did nothing when you shrink the page down to 320 or even smaller. The headers , Flex Grids and text just are not aligned and running within similar parameters. It looks great at 16:9 format. However, that is useless as professional websites adjust properly when viewed on the phone.

I'm thinking of redoing the whole website. Trying to work with the myriad of problems with the pages is time consuming. I have hundreds of pictures and can import objects from the other website. So using a couple templates for menus and pictures could be the more basic solution.

User avatar
Pablo
 
Posts: 22148
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: How to make an object flexible?

Post by Pablo » Thu May 30, 2019 3:46 pm

If you are not familiar with flexbox then I recommend to use layout grids instead. Using the flex grid requires some basic understanding of the flexbox concept.

Hobbyist
 
 
Posts: 82
Joined: Mon Apr 16, 2018 6:37 pm

Re: How to make an object flexible?

Post by Hobbyist » Thu May 30, 2019 5:01 pm

There might also just be too much on some of the pages. I am studying other websites and how they adjust on phones. When you view them on phones the pictures seem to have fewer "objects" (text etc.) and move the view to a downward scrolling experience with one picture to view at a time.

User avatar
Pablo
 
Posts: 22148
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: How to make an object flexible?

Post by Pablo » Thu May 30, 2019 5:46 pm

Maybe the example template will be helpful to get you started?
http://wysiwygwebbuilder.com/templates8.html

Post Reply