Streaming live at 10am (PST)

Trouble following Astro Law Firm tutorial and odd behavior in Designer


#1

Hello Webflow gang.

I’m a newbie who just completed the Astro Law Firm tutorial and found a few bugs throughout the process:

  1. Sometimes elements would just disappear from view, after I made a style adjustment. They were still there in the navigator, but I could not see them. I would then try styling with different colours to see if it would show up, to no avail. These elements were mostly divs and text blocks. My only solution was to delete the object and recreate one, applying the classes the original object had. Then everything was visible again.

  2. At the end of the tutorial, there is an issue with cascading styles. On deskop, we duplicated the home hero and applied interactions to one of them. Afterwards, the interaction hero was set to display on desktop only. Conversely, the original hero was set to display only on tablet and mobile.

However, when switching to tablet mode, which should’ve shown the original hero without interactions, it showed the “appearance” of the interaction hero, but without the interactions themselves. Namely, the added images of clouds, plus the bright galaxy image was at the forefront.

In mobile view, everything looked as though it should.

So in short, the styles set on desktop did not cascade to tablet.


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


#2

Here’s my link:

https://preview.webflow.com/preview/astro-law-firm-6d023e?preview=8f131d2d39ada1ddf92fa05dd0111fc4


#3

Hi @bellybuckle Thanks for posting this, this definitely sounds like odd behavior. Most likely there are some browser extensions causing the inconsistencies which you noted but it’s very difficult to tell without more information.

Please send me screenshots of the behavior you’re describing.

Can you please try the following:
(1) Try to reproduce the error while being logged into Webflow using Incognito mode with browser extensions turned off: https://support.google.com/chrome/answer/95464?hl=en
(2) If the problem persists, please take a screenshot of your Console and send it to me: https://developer.chrome.com/devtools/docs/console

Could you please let me know what browser version you’re using by sending me your information from this page?

There should be a small share link when you visit the page which you can send to me.

Thanks in advance! :bowing_man:‍♂️


#4

Hi Waldo. Thanks so much for getting back to me. Sorry for the late reply :wink:

Okay, so icognito mode didn’t work. And my browser is up-to-date. However, here is the “whatismybrowser” link: whatismybrowser.com/w/RJFD2RB

And my console yielded an interesting message (see attached)

Perhaps you can just go into the my project itself and take a look at things?

https://preview.webflow.com/preview/astro-law-firm-6d023e?preview=8f131d2d39ada1ddf92fa05dd0111fc4

Thanks again!
B.


#5

Hi @bellybuckle

I tested but was not able to reproduce the first issue you mentioned. Can you provide more information on this? Have you run into the issue again?

Issue two looks like it may be an issue of different styles. It looks like you have an overlay on mobile landscape and portrait, but not on tablet:


#6

Hi Brando.

Thanks so much!

As for issue #1: I would have to come across it again and then post here.

As for issue #2, the style difference still doesn’t make sense if what I set on desktop is suppose to cascade. The “home hero” section, which is hidden on desktop, has an overlay and doesn’t have the clouds on top. This is the version that should be showing on tablet, but is not. Instead, tablet is showing the “home hero interactions” version (with clouds and missing overlay) but minus the interactions themselves.

Yes, I could easily go into tablet mode and restyle to match the mobile views, but it’s the cascading component that doesn’t seem to be working in this situation.

Thoughts?

B.

P.S. Check out the nav in the panel at right: the tablet is showing the clouds that are only in the rotator div, which houses the interactions on desktop. They shouldn’t be showing on tablet at all, but they are.


#7

Hi @bellybuckle

It looks like home hero interaction is only visible on Desktop. And when you go into preview you can see the interactions.

home hero is visible for tablet, mobile landscape, and mobile portrait. When going into preview, I can see there are no interactions here.

From what I can tell all styles are cascading down correctly. In this case, the only difference I can see is that the overlay was added to the mobile landscape, rather than the tablet version — so you will need to add that overlay to the tablet version manually.

To make this style cascade you can remove the overlay from mobile landscape and add it to the tablet breakpoint instead:

I hope this helps clarify things a bit more :slight_smile:


#8

Hi Brando.

Thanks so much. It’s been a while since I’ve been on these forums so my apologies it’s taken this long to get back to you.

Okay, I can see the way to fix things, as you have illustrated. It still baffles me, however, that I followed the tut so closely and the styles didn’t get applied as they should’ve. So could this be a bug?

Thanks again for your time and explanation :slight_smile:


#9

Hi @bellybuckle

I don’t think this is a bug. It appears that all styles cascaded correctly, but there were just a couple of styles missing from one of the instances. Once that’s addressed the issue should be resolved!

Let me know if you have any other questions :slight_smile:


#10

Thanks Brando. I truly appreciate you getting back to me again :wink:
B…