▼
Streaming live at 10am (PST)

Deleting a nested class in mobile mode affects desktop mode

Design help General
#1

Yo!

I have this site where I’m playing around with some circles (I call them bubbles) with position:absolute. There are 5 of them and 2 of the have a different height and a nested class. When I try to delete the nested class in mobile portrait mode to center the “bubbles” in the middle of the viewport, It also affects the other media queries.

I always thought that cascading always operated from desktop to mobile and not the other way around as well…?

Preview: https://preview.webflow.com/preview/balanserat?preview=025fd95806e8befa061deaf59342b26c

The bubbles I talk about are those under the heading of “Jag hjälper dig med:”. The classes they consist of is:

  1. Bottom Circle (+Top offset class for a alternating height) with position:relative
  2. Top Circle with position:absolute
  3. Circle text

As I said, I want the bubbles to be vertical aligned and centered in mobile portrait mode. But deleting the “Top offset”-class affects the all other media queries as swell.

Help me a bit?

#2

Hey @StevenP, great question.

Though Webflow is code free it can still be helpful to understand how the interface is controlling the code in order to avoid these types of errors.

As you know Webflow primarily deals with HTML and CSS in creating your website. HTML is global and doesn’t change between device views. If you delete a div block in the tablet view it will be deleted in the desktop view.

So it is important to know what is actually HTML and what is CSS. When you create a class on an element you are creating new HTML. When you delete the class you are deleting HTML.

It looks like this:
No class HTML

<div>some text<div>

With a class created in HTML

<div class="youClass">some text<div>

So when you delete a class when you are in the mobile view you’re deleting it out of the HTML and reverting back to the first code example.

You need to structure your classes so that you can apply CSS attributes like margin and padding, to the different view points without deleting classes.

2 Likes
#3