Varbase Buttons Block mobile device layouts

Open on Drupal.org →

Created on 27 July 2023, over 2 years ago

Updated 15 August 2023, about 2 years ago

Problem/Motivation

Not sure I am in the correct place for this. When I create a Varbase Button Block with three buttons, it looks good on desktop. Even when I change my simulated mobile view on desktop the view looks good. But, when I actually view the page on my mobile device the buttons are stacked on top of each other with zero space between them. This then throws google indexing errors because the mobile view does not have enough space between elements.

Steps to reproduce

Given - build page with three buttons in a button block
When - ciewed on mobile
Then - the buttons are stacked with zero space.

Proposed resolution

Even when I override the css margin to a positive number, the rendered buttons have zero spacing.

Remaining tasks

✅ File an issue about this project
❌ Addition/Change/Update/Fix to this project
❌ Testing to ensure no regression
❌ Automated unit/functional testing coverage
❌ Developer Documentation support on feature change/addition
❌ User Guide Documentation support on feature change/addition
❌ Accessibility and Readability
❌ Code review from 1 Varbase core team member
❌ Full testing and approval
❌ Credit contributors
❌ Review with the product owner
❌ Update Release Notes and Update Helper on new feature change/addition
❌ Release

Varbase update type

✅ No Update
➖ Optional Update
➖ Forced Update
➖ Forced Update if Unchanged

User interface changes

N/A

API changes

N/A

Data model changes

N/A

Release notes snippet

N/A

💬 Support request

Status

Active

Version

10.0

Component

User interface

Created by

🇺🇸United States HeneryH

Live updates comments and jobs are added and updated live.

Sign in to follow issues

Comments & Activities

Issue created by @HeneryH
Comment over 2 years ago →
🇺🇸United States HeneryH
The photo was of the rendering on an iPhone. You can see the large margins on the simulated mobile view when I override the button class margins via the sites/default/files/gin-custom.css file. I cannot seem to get that to render on my phone.
Comment over 2 years ago →
🇺🇸United States HeneryH
I can share the actual URL to anyone who wants to see the live effect. I'd just rather not post it here.
Comment about 2 years ago →
🇺🇸United States HeneryH
Hm, not sure why the image links didn't work. Trying images again.
Comment about 2 years ago →
🇺🇸United States HeneryH
Comment about 2 years ago →
🇺🇸United States HeneryH
I still can't get this to render properly. Anybody?

I think it has to do with the proper way to add margin top and bottom for buttons. I have read that it should be done by css on the parent container but I can't see how to fix it.

My google indexing is failing because of this.
Comment about 2 years ago →
🇺🇸United States HeneryH

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024