I made a customized layout for each breackpoint, but while changing the screen resolution within one breackpoint I noticed that the styles change. How can I make the CSS styles remain rigid within a breackpoint?
I have recorded this problem in the video.
I would be very grateful.
[1]: http://](LINK ON WEBSITE: Webflow - SunScool)
That doesn’t look like a breakpoint change, just a layout shift cause by your element arrangement.
If you’re using flex with child wrapping, it will flow items depending on the available space.
I see that the spacing in breackpoint Tablet starts at 991px and ends at 768px, but in fact the 991x still applies the style from the previous breackpoint Desktop*. And if I resize it to 1px, everything falls into place. The style I set for that particular breackpoint is applied. So breackpoint Tablet starts applying the style at 990px instead of 991px. That’s why I’m trying to figure out why the breackpoint Tablet style is being applied 1px later than it should? I also noticed that on breackpoint Desktop* this block already looks compressed and would like it to apply the style that breackpoint Tablet applies. I may be trying to dig in the wrong place. But I would be happy if someone could explain to me exactly what I need to do so that when I scale the screen resolution, I can clearly indicate the application of the desired style. Thanks in advance!
LINK ON WEBSITE: Webflow - SunScool
Yeah there’s a bug in Webflow where the tablet styles don’t get applied untill 990px.
Normally it doesn’t matter but it can be a real pain if you are using an interaction that works on desktop but not on tablet (or vise versa). Then you can end up with a dead zone at exactly 991px with the styles and interactions mixing up really badly.
If it’s not breaking your site (and it doesnt seem to be) then I wouldnt worry about it but if you need to target 991px width exactly you can use the following custom code:
@media screen and (min-width: 991px) and (max-width: 991.5px){ .mydiv { /*styles for mydiv go here*/ }}