What's a better way to do this?

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
ghines
 
 
Posts: 33
Joined: Sat May 16, 2015 7:01 am
Location: New South Wales, Australia

What's a better way to do this?

Post by ghines »

Hi all,

I have a layout grid like this:

Image

Image

I want to keep the paypal and text on the RHS of the page, but when the page resolution drops below 860px the paypal item cannot be resized and the following happens:

Image

Is there a better way of doing this?

TIA
paddlefoot
 
 
Posts: 80
Joined: Fri Oct 13, 2017 8:30 pm
Location: SW Florida

Re: What's a better way to do this?

Post by paddlefoot »

Doesn't look like you have created any breakpoints. Add one or two and it should help.
ghines
 
 
Posts: 33
Joined: Sat May 16, 2015 7:01 am
Location: New South Wales, Australia

Re: What's a better way to do this?

Post by ghines »

What should I change at each breakpoint?
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: What's a better way to do this?

Post by crispy68 »

Keep in mind, when using the layout grid the column that the paypal button is in is only 2x. As the screen gets smaller so does that column eventually the image will overflow the column.

Since it looks like your default is set to 1000px, set a page breakpoint of 768. When you go to that breakpoint you will see that the paypal button is bigger than the column. You will need to adjust the layout grid to make it 3 columns versus 2. Before you do this, make sure you change the overflow from none to hidden.

Continue to add breakpoints until you get down to the smallest bp you want to create.

If this is all you plan on having inside the grid, then I would suggest using a flex container. Set your flex container properties as such:
Flex direction - row
Flex wrap - nowrap
justify content - flex-end
align items - center
align content - center

Set your maximum with to 1000 if desired.
ghines
 
 
Posts: 33
Joined: Sat May 16, 2015 7:01 am
Location: New South Wales, Australia

Re: What's a better way to do this?

Post by ghines »

@crispy68 - Thank you once again for your great suggestions, it's truly appreciated and your suggestion works.

Yes, a flex container would be a great idea, However just like a flex grid I cannot limit the background colour to the width of the page. Hence why I'm going down the Layout Grid route.

Thanks again.
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: What's a better way to do this?

Post by crispy68 »

just like a flex grid I cannot limit the background colour to the width of the page.
Sorry, I don't understand what you mean by this.

Place the flex container inside the grid.
ghines
 
 
Posts: 33
Joined: Sat May 16, 2015 7:01 am
Location: New South Wales, Australia

Re: What's a better way to do this?

Post by ghines »

Sorry, I don't understand what you mean by this.
Sorry, I thought you meant to use a flex container instead of layout grid.
flex grid I cannot limit the background colour to the width of the page
With a flex grid the background colour will expand to the full width of the browser page. So if the page is 1000px wide in WWB and your monitor is 1280px wide the background will be 1280px wide. In a layout grid you can contain the background width to say 1000px by setting the background width to -1000px.
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: What's a better way to do this?

Post by crispy68 »

Sorry, I thought you meant to use a flex container instead of layout grid.
I did. However, nowhere in your original post did you mention the background played any part into it.
flex grid I cannot limit the background colour to the width of the page
This is why I suggested placing the flex container inside the layout grid. You will get the background control you want with the layout grid but the ease of using flexbox for the text and buttons. I would suggest also setting the layout grid to flexbox.

A 3rd option you may consider that I didnt mention is simply use a layout grid and insert the text and then the button. Initially the button will be below the text because the text is 100% width. Right click on the text object, select object properties and on the General tab change the layout full width option to false. This will allow you to shrink the text box down to where it and the button will be on the same line. You may have to add some top padding to get the text to vertically line up with the button and add some right padding to give some space between the text and button.
ghines
 
 
Posts: 33
Joined: Sat May 16, 2015 7:01 am
Location: New South Wales, Australia

Re: What's a better way to do this?

Post by ghines »

Thanks @crispy68, very helpful. Will try your suggestions.

Thanks once again.

Greg

BTW - Is Flexbox a good option to use in modern website design? Just thinking about Browser compatibility.
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: What's a better way to do this?

Post by crispy68 »

It will work on all modern browsers except for IE.

see here for more info: https://caniuse.com/?search=flexbox
Post Reply