Hi all,
I have a layout grid like this:
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:
Is there a better way of doing this?
TIA
What's a better way to do this?
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
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
-
-
- Posts: 80
- Joined: Fri Oct 13, 2017 8:30 pm
- Location: SW Florida
Re: What's a better way to do this?
Doesn't look like you have created any breakpoints. Add one or two and it should help.
Re: What's a better way to do this?
What should I change at each breakpoint?
Re: What's a better way to do this?
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.
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.
Re: What's a better way to do this?
@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.
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.
Re: What's a better way to do this?
Sorry, I don't understand what you mean by this.just like a flex grid I cannot limit the background colour to the width of the page.
Place the flex container inside the grid.
Re: What's a better way to do this?
Sorry, I thought you meant to use a flex container instead of layout grid.Sorry, I don't understand what you mean by this.
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.flex grid I cannot limit the background colour to the width of the page
Re: What's a better way to do this?
I did. However, nowhere in your original post did you mention the background played any part into it.Sorry, I thought you meant to use a flex container instead of layout grid.
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.flex grid I cannot limit the background colour to the width of the page
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.
Re: What's a better way to do this?
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.
Thanks once again.
Greg
BTW - Is Flexbox a good option to use in modern website design? Just thinking about Browser compatibility.
Re: What's a better way to do this?
It will work on all modern browsers except for IE.
see here for more info: https://caniuse.com/?search=flexbox
see here for more info: https://caniuse.com/?search=flexbox