This is the website https://arreli.se/.
As you can see on the first Hero Widget(With the buttons).It’s fine on desktop version, but on mobile version, they have different lengths the buttons. Is there a difference whether using the Buttons widget or the Hero Widget(Buttons) for solving the issue at hand?
Button size on Mobile Layout
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi TheZagros3000
Thanks for posting.
In the ButtonsDesign and Layout section of the Hero is a Width setting. Try setting the width value to 238 and see if that helps.
Hello Andrew and thanks for help, how to have each button under eachother in the mobile version using the Hero Widget? If you look at it, it becomes like a “pyramid”.
Okay, setting up the width made them display under eachother on mobile version. But the problem now is the following Hero Widget with text and 2 buttons. Only a part of text shows, the rest and the 2 buttons are like hidden. How can i solve that?
That’s also been solved, they’re not ‘hiding’ anymore. But I’d like to move the widgets closer, how can that be solved?
You’ll need to edit the Hero and check the Responsive Height value, is too little? Try removing it completely to test. There is also 400px padding added via the widget right panel Layout section that might be an issue.
Mr Andrew, if you check https://arreli.se/ and compare the PC version and mobile version, the “4D EDGE Clear Black iPhone” product doesn’t show up on the mobile version. Now if I increase the margin on the hero widget it will show up on the mobile version but the space between the products and the hero widget on the desktop version is greatly increased. For the products, I’m using wordpress powerpack for the products.
Hi, the reason is that a negative margin of 550 is being applied to the row. Edit the row concerned and check the Layout section on the right. 550 is the negative margin being applied.
I removed it and the product shows. But the 2 buttons for the hero widget doesn’t show up.
So I changed the top and bottom padding to 200. And now it shows on on mobile version. But the space between the hero widgets is too much.
Please, take a screenshot of the issue, indicate where on the screenshot you’d like us to investigate for you, upload to imgur.com and send us the link. We’ll then take a look. Thanks.
Please, still respond to my message above but to respond to your other thread, I understand your frustration. The issue is that you’ve setup several padding and margin values without checking how they impact the layout on desktop and mobile. Page Builder offers freedom but with that comes the opportunity to create challenges, negative margin is an example of that. The simplest way forward is to leave padding and margin values as standard, add your content, only once all of your content is in place, then add spacing as required. After each adjustment has been made, check desktop and mobile. That way you can easily see the effect of each change and adjust accordingly. I hope this helps your future designs.