When styling in a mobile view, choosing a higher level selector changes the view to desktop

Community resources Bugs
1

I was unable to find this while searching the forums-
when I’m adjusting selector styles in a mobile view, choosing a higher level selector changes the view to desktop.

This means there’s no direct way to mobile-style the parent selectors of a combo class, without breaking apart the combo class to create a “straw man”, styling those temporary parts, and then deleting them.

Am I approaching this the intended way? Here’s an example…

Thanks!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2 Likes
3

Hi @memetican

Thanks for posting about this.

This is expected behavior based on how CSS classes and media queries currently work in the designer.

However, that would be an awesome feature to have in Webflow, and is something you could definitely post about in our Webflow Wishlist.

The workaround here would be to delete the combo classes from the element. Then style the parent selector as needed, and re-add the combo classes.

I also recommend checking out how we used the BEM class naming convention to build out the Webflow.com site.

4

Thanks Brandon, I’ll add that wishlist item. The ability to style the base classes in a combo class is very powerful, one of the best features of Webflow. Making that work in mobile design would really help.

About the workaround, deleting & recreating the combo classes won’t work on many of the templates I’m using, because the combo classes significantly impact the final style. In some cases, deleting light / dark variants such as such as the “White” combo class would also make the content disappear (black on black).

Thanks also for the tip on BEM. I use that on large non-Webflow projects, but in Webflow it seemed redundant with the combo classes. I’ll watch the video and give that some more thought in my design process.

2 Likes
5

Hi Brandon, I’ve been wrestling with this particular issue for the past few days and I really think it needs to be classified as a bug, rather than a “design limitation” with a wishlist request.

The reason is that the ability to work with Combo Class styling in the canvas mobile views is essential to designing mobile sites, and there’s no realistic workaround. There are only partial workarounds that can be applied in specific, simpler situations.

There’s another small glitch I found relating to the Combo Class selector which may be related, I’ve included it here for you.

Thanks again and I hope that my bug writeups are helpful to the dev team- I know there have been quite a few of them lately since I’m now pushing the capabilities of WebFlow. I absolutely love this too, and looking forward to see it become an even stronger product.

4 Likes
8

Hi @memetican

Thanks so much for your help in finding this weird glitch!

I reported this one to the team so we can start working on a solution.

Thanks also for your honest feedback about Combo class styling on mobile. We have an internal report for this enhancement request and I added your feedback to it.

We will revisit this issue and I can post back here when I have more information.

I appreciate your continued support and appreciation of Webflow so far :slight_smile:

Thanks again!

1 Like
10

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