I’ve recently installed a plugin (WP Mobile Detect) which uses shortcodes to distinguish between mobile and desktop environments.
An Example would be:
[notdevice]
Desktop content
[/notdevice]
[device]
Mobile content
[device]

However, when I try to use the following MiniCorp shortcodes it didn’t work quite as expected:

[device]
[row]
[grid6]
[button url=”#” full_width=”yes”]Ik wil theorieles[/button]
[/grid6]
[grid6]
[button url=”#” full_width=”yes”]Ik wil theorieles[/button]
[/grid6]
[/row]
[/device]

What happens is, the buttons are both the width of the entire page (even though it’s inside a grid6, which should cover only half the page.

I’ve tried using grid3, since I thought that maybe on the mobile version of the webpage grid6 would cover the entire width instead of grid12, but to no succes.

My responsive layout setting is set to responsive (not fixed, which I tried, but didn’t give the result I was hoping for).

Any help would be appreciated.

all the grid columns are shifting under each other when you have mobile view. It is made like that so you dont have squished content on small screens.

But for your thing, there is ofcourse a solution.
Put it into one grid, change the full_width to ‘no’ and set the align to ‘right/left’, it will works as expected.

Dont forget that you can use your own classes in those shortcodes and even a inline css style.

Here is the solution for you:

Just remember, keep those buttons next to each other in the editor. When you put them on new line, they will be moved also on the page.

Hope it helps.
Have a nice evening. Bye

---
If you are happy with our theme and support please rate us in your Downloads Section on ThemeForest. A 5 star rating is always a great motivation for us!

Thanks for the quick reply.

I’ve copied your code and made a quick adjustment (you put full_width=”yes” in the code, which I think should be “no”.

This solves the problem somewhat. The buttons are now correctly on the same line, but the button doesn’t actually fill half of the screen, which is the look we’re going for. I’d like each button to fit half the screen, even if the text only has 2 characters for example.

Do I have to assign a custom css class and do it myself or is there an elegant solution provided by the theme?

Thanks in advance.

just as you mentioned. Full-width has to be no :) Sorry about that.

Since there is used only one full width column (12) and buttons are not full-width either, they have their own size. Exactly as you wrote, you can adjust that by inline style directly on those buttons. Add there for example 48% width,so it will look like this:

Try it and let us know ;)

Bye

---
If you are happy with our theme and support please rate us in your Downloads Section on ThemeForest. A 5 star rating is always a great motivation for us!