Hey Everyone,
If I am reading the docs correctly, I make my design in Desktop view and then switch to smaller screens to make adjustments that should not cascade up but down. In other words, If I make a change on Portrait view of a phone view it should not affect the other views?
I have a Slider and in phone landscape view adjusting the margin differently cascades up and messes with the Desktop view. If I adjust the heading size it affects the desktop view as well.
What am I doing wrong?
Can you please be more specific as to which element on the page you are trying to change on some breakpoints? Of course this should work desktop-first, cascading down.
I am trying to adjust the Slider and the Headings. The headings in each section are too big on smaller screens which in my opinion should adjust accordingly but do not they are the same Pixel size as on the larger screens. The slider goes 100% width with no Padding or Margin on either side on smaller screens.
Can you create a screen rec showing your actions? Everything works as intended for me.
Here is a link
Dropbox - File Deleted
What I meant can you please show how changing things on smaller breakpoints affect things on desktop?
Something is wrong, now that I go back and try again things are working differently. I can change the Margin now and that works ok but the background color is staying on grey in the smaller versions which it wasn’t doing before. I am guessing that you can’t change the heading property in the drop down but have to adjust the actual font size in the panel for @media.
My two cents is there seems to be a need of some work here on this Editor. I know they are trying to do a lot and sometimes things just don’t work as we would want. Maybe it’s better when you can adjust the actual code.
My question is then can you get into the CSS file when you pay and are not on the free version or are all the styles put in the head tag?
Edit: so I go back again and things are different yet again. The bg color is set to transparent on the slider at the smaller screen and I know I set it to white. I logged out refreshed the browser and logged back in and things are different yet again. I am on a fast connection broadband and have a year old MacBook Pro 15" loaded. So it isn’t that. Must be a lot of people hitting their site this morning which doesn’t look good for hosting a site here. I think that is the reason when I tried about a year ago and decided not to use Webflow. Maybe next year.
To be honest everything you describe sounds really weird and never happened to me. I guess just bad luck for you today 
Webflow hosting is one of the best out there, your hosted sites are going to work lightning fast (provided you designed them well).
@java_I_tess the issues you describe I’ve never seen or had them and I’ve been using Webflow since 2014.
Please record a screen recording of the bugs you are encountering. as they sound abnormal.
Well, these are actually the same reasons I stopped trying to use Webflow a year ago. The inconsistencies when trying to develop. I go from one machine to another, one browser to another, or refresh the browser and I get different performance and output from each. I’m wondering how it could be just my set-up or “bad-luck.” It also makes me question how the performance of a live site will be across the myriad of different devices and browsers out there. I mean Webflow is a great idea just needs some work.
The Slider it seems is the issue and causing most of my problems. Maybe someone should look at the way they are coding it?
You still haven’t provided any sort of screencast with the problems you mention. Webflow developers will need to know what to look for if there are bugs.
I provided one above and here is another screen recording. When recording it I didn’t even actually notice that it did mess up the Slider by changing it and then changing it back to the settings that it was working fine with. I am on a different machine as well.
Slider behaving quirky while resizing in designer is a known thing. It won’t affect the way it looks when published, and just clicking anywhere on the slider will fix it. As for you trying to change heading sizes with selecting different h1-h2-h3 tags… well, that’s not how resizing works. You cannot dynamically change html structure with breakpoints. You need to use font size to change it on different breakpoints that is all.
Ok they should work on that, but H1’s shouldn’t be the same actual pixel size. An H1 on a large screen is much larger in actual pixel size than it is on a phone.
You can literally change this in the CSS for smaller devices…?
My point is why? Inherently on the web/browser these tags automatically adjust to screen size.
Because that’s how CSS works. You style based on your breakpoints/media queries. You don’t just assume the browser will scale everything.
Your browser has default styles it applies to elements. Most developers use a reset.css file which overrides all the default browser styles (this is best practice). I believe this is what Webflow does. It gives you a total blank slate to style everything the way you want… Instead of fighting the different default styling/scaling/fluidity preferences on a million different browsers.
Have you watched any of the videos at https://university.webflow.com/
I do know this, believe it or not, by reading the docs and what they say in their videos things are built on flexbox. If not they should say so. They say by adding the premade blocks that it works across all screen sizes. That is not true.
Not everything is built on flexbox. You have the option to use flexbox on elements if you so choose. But flexbox does not effect font size. You need to set font size across the breakpoints.
When you drag in a heading from the elements panel it has a default font size that carries down from desktop all the way through portrait mobile. You need to go into each one and change the font size on that heading.
If you want percentage/ratio based fonts. Set your body font size to 100% and then use REMs or EMs for your font sizes.
It’s pretty straight forward.