Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Stickybox vertical/horizontal based on screen wide #194

Open
humitos opened this issue May 21, 2024 · 9 comments
Open

Stickybox vertical/horizontal based on screen wide #194

humitos opened this issue May 21, 2024 · 9 comments

Comments

@humitos
Copy link
Member

humitos commented May 21, 2024

While working with stickybox I found that I'd like to have the vertical ad when it's floating in the bottom right (wide screen), but horizontal when it's injected at the bottom of the main content (narrow screen):

Vertical Horizontal
Screenshot_2024-05-21_10-16-07 Screenshot_2024-05-21_10-16-25

I think it makes the ad to display nicer and more adapted to the content itself. Is this be a good idea? Would it be possible to communicate this to the ad client?

@ericholscher
Copy link
Member

@davidfischer is probably better to answer this one.

@davidfischer
Copy link
Contributor

The stickybox only floats at >1300px wide. Otherwise, it's supposed to collapse back to a static placement wherever you put the div (sidebar?). The stickybox can be used with the horizontal class, but I don't think that's what you're doing here, right?

@humitos
Copy link
Member Author

humitos commented May 24, 2024

I'm not using the horizontal class by default because I don't want it to be horizontal all the time. I want to be vertical when the stickybox is floating on >1300px wide and horizontal in the other scenario. Is that possible? Does it make sense?

In the tests I've done, I found that it display nicer and that's why I opened this issue here (look the example from the description)

@davidfischer
Copy link
Contributor

The sticky box is only intended to be used at widths >1300px. On widths less than that, it collapses into a static placement.

@humitos
Copy link
Member Author

humitos commented May 27, 2024

Yes, my question is: when it collapses into a static placement, can it use the horizontal CSS class style?

@davidfischer
Copy link
Contributor

Yes, my question is: when it collapses into a static placement, can it use the horizontal CSS class style?

That isn't automatic and if you just set horizontal on it it would apply whether it is collapsed or not.

@humitos
Copy link
Member Author

humitos commented May 28, 2024

Yeah, that's what I realized while doing my tests. I'd like to change that behavior that's why I opened this issue here. Would that be a feature you accept in the client?

Another approach could be the ad client to trigger an event when it collapses. That way, I can subscribe to that event and add horizontal CSS class when it happens.

Does this make sense?

@davidfischer
Copy link
Contributor

I don't like magically making something not horizontal (or making it horizontal) when there's a class that says the opposite. It seems not explicit.

@ericholscher
Copy link
Member

Sounds like an event is perhaps the best option? But I think in general most folks aren't resizing windows, and we just need to default the right styles based on page width 🤔

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants