What's a better way to do this?

[ghines]

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

[paddlefoot]

Doesn't look like you have created any breakpoints. Add one or two and it should help.

[ghines]

What should I change at each breakpoint?

[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]

@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.

[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]

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.

[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]

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.

[crispy68]

It will work on all modern browsers except for IE.

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