Hard to come up with a Title, but here is my issue and maybe I am old school, but the “Responsiveness” NEVER Works for me. I start with the Desktop - and do my best to think about Mobile, but that just really Limits my Creativity. I go to Mobile after designing Desktop and it is always a Disaster and Unusable!
I would Rather Start Over from Scratch with Mobile - use the Content and Components and affix and create on the Mobile. You say it never Cascades Up and Just Down; but I have not found that to be true. I erase stuff from the Mobile and it erases from Desktop. Now I understand that should be logical, but when you say it does not Cascade Up - then nothing should be affected, but it definitely is affected!!
Any guidance here would be great, but I do not want a lesson on how to do it “right” just want to know can I start from scratch with Mobile… Thx
@jdbrowningjr when you say you erase stuff from mobile, do you mean actually delete elements? If that’s the case, then yes they will be deleted on desktop as well. The cascading only works for styling . So if you make front green on mobile, it will not go up to desktop.
The proper way to do this would be to create separate div sections for desktop and mobile. If you do this, what you can do is make the “desktop” divs display normal on desktop, but display:none on tablet and below. For the “mobile” divs you can make them display:none on desktop, but display normal on tablet and below.
This would be the best way since the display property is technically a “style” so it will cascade properly while only showing the correct elements you want on desktop and mobile.
I’ve never run into this issue before, but if responsiveness doesn’t work for you, I think I have a solution that you could use if you think it could fit your needs.
Say, for example, you want portrait mobile to be different than your desktop version, you could have a div wrapper for each breakpoint, throw all your styles in there, and only have it show on the desired device size.
I do something like, “desk-page-wrapper” and throw all my desktop elements in there, and have it show only on desktop screens.
Then for mobile I have a “mobile-page-wrapper” which has totally different elements that only show inside of the page wrapper that only shows on mobile (display none on desktop).
If you want a button on desktop, you can name it “desk-button”
If you want a button on mobile, you can name it “mobile-button”
From this, you can style and more importantly rearrange the order and structure of the elements within the mobile or desktop wrapper w/o affecting other breakpoints’ structure.
I don’t like to use this method as it is pretty unconventional and you are essentially building the page more than one page for a single page. This will require you to probably more than double your number of individual class names, but if you really want a ‘responsiveness workaround’ this is what you can do.
Thanks Ethan for your suggestion/guidance. I agree it is unconventional, I just may need to spend more time understanding and honing my skills with Webflow.