Pro - header - how to set two buttons on the same line

Support
#1

Hi. I’m trying to set the two “learn more” buttons on the same line (on desktop devices). I have not been able to do it. I guess it is possible. How?

The page is edinventa.com/test

Thank you in advance!! :slight_smile:

#2

Hey there,

Looks like you’re adding the button in the Container that the Flex Layout was set to Column. It’s contents will be stacked just like it is now. Please duplicate the row and set the container’s flex layout to Row. Then, remove the extra elements and duplicate the button. Please see https://youtu.be/Doot9bWJoEY

Thanks.

#3

Thanks for the video explanation. I have tried that, but I don’t achieve the wanted result.

The first container is set a a column because I need each element below the previous one.

I have added a second container as a row because of your given explanation: I want the second button at the right instead below. Unfotunately the new container is set as the second column of the previous container (check edinventa.com/test). Why? How to solve it?

Thank you!

#4

In addition the inline buttons should be responsive: in mobile, they should be one below the other whereas on desktop they should be one at the right of the other.

So maybe the solution is adding raw block of code with ? That seems a bad practice at first glance though.

#5

Hi There,

See this setup: https://screencast-o-matic.com/watch/cbieIHllmA
Bar height should be set to auto. Layout is set to ROW. WRAP children is set to ON.
See column and button setup too on the screencast. Please note that if the button still fits it will not stack on top of each other.

#6

OK. I have done what you have said. ¡Thanks for the video!

I wonder how to accomplish the opposite for the rest of the elements:

  • Row 1: text
  • Row 2: button 1 and button 2 (one below another if they do not fit on the width) -> DONE
  • Row 3: telephone number

Web page where I’m trying to implement that: http://www.edinventa.com/test/

Thanks

Carlos

#7

Hi Carlos,

Would you mind providing us login credentials so we can take a look on your setup?

Please use the “Secure Note” for providing a credentials.

Thanks,

#8

OK. These are my credentials for edinventa.com/wp-admin.

#9

Hi There

I have fixed for you, you need now to play with the parameters in order to make it look like you want.

Thank you

#10

Hi. I’m sure what you have fixed. Now, I see the mobile version wrong:

I can’t see any change on the desktop version (this forum only allows to upload one image, so I can’t upload the screenshot, sorry).

And I see two buttons and texts on the page (not header) I don’t know why (this forum only allows to upload one image, so I can’t upload the screenshot, sorry)

I wonder how to accomplish a header like the following:

  • Row 1: text
  • Row 2: button 1 and button 2 (one below another if they do not fit on the width) -> DONE
  • Row 3: telephone number

Thanks. Carlos

#11

Desktop has not change:

#12

Hi Carlos,

If your container is set to row, the elements will align side by side. If your container is set to column, they will stack on top of each other.

Each Element, Container or Bar have a customize button where you can hide the element according to the screensize.

The healder builder is a great tool, but it takes time for you to achieve the desired layout.

Please use the guideline above to achieve what you are looking for.

Thank you

#13

Hi. It seems to me this responsive layout I want is very typical. I suggest you guys to add that feature: be able to add 2 buttons on the same line and break it into two lines if it does not fit on one.

The suggested way of hiding elements depending of the screen size seems a botch for me.

The workaround I’m going to try is using a single column. Then using raw elements when I want several elements on the same row. On the case of buttons, hopefully using the following code surrounded by span labels will work: http://demo.theme.co/integrity-1/shortcodes/buttons/

Question: the design of those buttons seem different to the ones of pro, ¿is there a page with shortcodes of the new buttons?

EDIT: reading this: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I think it should be possible to set all the elements on the same row. Then, set the elements we want to be alone on one row as full width or with the margin to fill the 100% of the device. Am I right? Could it be a solution? How to accomplish that?

Remember: the result we want is:

  • Line 1: text description (I think if we set width to auto, it will work beautifully)
  • Line 2: two buttons (break them into two lines if no space)
  • Line 3: telephone number (same! I believe I have found the solution meanwhile I’m writting this!!).

So, does that solution has any inconvenient? Set all the elements on a raw container, and set the elements we want on a single line as width - max width to 100%

Thank you!

#14

Hi There,

The Container can act as ROW or Column depending on the setup. Add 4 Containers in a BAR:
First container > Add the headline element
Second Container > Add the first button
Third Container > Add the second button
Fourth Container > Add the phone number text

How it will be responsive depends on the SELF FLEX settings and you are correct on the CSS tricks guide. See this: https://screencast-o-matic.com/watch/cbiijMlDQ9

Hope this helps.

#15

Wow. Nice explanation. Now seems simple. Thanks!

I’m curious to understand why the following container that is set as a ROW but the headline is broken into a new line and why the responsive behaviour is not working well:

So:

  • Case A: all elements are in the same row container. However the headlines are broken into new lines
  • Case B: if I add a text element (instead a headline element), it’s not broken into a new line (as expected).
  • Case C: when I reduce the size of the window to see how it looks for mobile, the text overflow the next section.

Thank you very much you are a awesome support!! :slight_smile:

#16

Hi there,

CASE A: There are 2 workarounds that you can use:

  1. Uncheck the WRAP CHILDREN function from the container Flex Layout properties which will make the items inside go beyond the limited parent container area without breaking:

  1. Add 2 Headline Elements. Go to first one and click on the Customize tab and set it to show only on desktop and tablet views. Then set the font of the headline to something that will not break till the breakpoint of the tablet:

Then go to the other Headline which the content of it is the same but is set only to show in mobile view, make the font smaller to fit the mobile screen.

Case B: As explained above it is a matter of WRAP CHILDREN option. Also in the Setup option of the Headline and Text element, you have the Text Overflow option which will help you regarding the wrapping of the elements:

Case C: As explained in the Case C, you will need to duplicate the elements and show/hide them in different viewports and set proper font sizes and other stuff to fit the proper viewport screen.

Thank you.

#17

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.