Yay, my first Webflow topic. The minds that live here must be filled with all sorts of magic, I hope I am able to tap into some of it.
I have pasted my read-only link as requested to allow y’all to see what I’m up to. I own a small dirt bike accessories business and I’ve taken to building the website myself to save myself some money. It has been going well, mostly but for some reason I seem to have a consistency issue with my background. It’s really getting me frustrated and after many hours of Webflow tutorial watching and forum reading I have not yet figured it out, I’m hoping y’all can help.
I understood from the tuts that the desktop breakpoint is what gives every other breakpoint it’s settings from a style point of view, as in it cascades up and down. I also understood that each bigger breakpoint affects itself and bigger, not smaller. I have wrapped my head around this construct and have built and altered things in my site according to that.
For clarity, I am using a Macbook Pro 15" with 1680 x 1050 res. I have a 2nd screen which is 1920 x 1080. I mostly design in the Macbook screen and check published results on both the Macbook Pro, the 2nd screen and my Samsung S10+.
I find it easier to explain problems in point form because that ensures all issues get a response so I’m going to do that here.
I understand breakpoints. I understand their use. However when I open my project in the designer to work on it on the Macbook Pro screen, the default PX size shown is 1279px @ 100%. Also, it actually doesn’t matter what screen I am viewing the designer on. Why 1279px?
Because I wanted to see what the site would look like on smaller and bigger screens, I added all available breakpoints. It seems like more work because now I have to align everything accordingly so that every size is catered for. This is really difficult with my landing page background which has a slider with 3 images. Only the first image gives me trouble, the remaining two do not.
See Image A above, this is the published site on my Macbook.
See Image B above, this is the same published site on the 2nd screen See how the boots are cut off on Image B? Why? And for the life of me I cannot get the orientation to fit across all layouts so that I have consistent background image.
Now, if you look at the site in the designer, it looks as follows:
Above left is desktop breakpoint (seems to default to 1279 as stated above), above right is 1280px breakpoint
Above left is 1440px breakpoint, above right is 1920px breakpoint.
Above left is tablet breakpoint, above middle is mobile landscape breakpoint, above right is mobile portrait breakpoint. I couldn’t get the background image to completely show in either landscape or portrait so I settled for good enough which is what you see. Also, I wanted fixed, but fixed background doesn’t seem to work for me in landscape or portrait, as soon as I publish it and view the site using my Samsung S10+, the image is not fixed. It is however fixed when in designer and in preview.
Now comes the publishing headache. There is an annoying discrepency between what I see in the designer and preview, compared to what I see when published. Let’s take image B above, it’s the largest breakpoint @ 1920px. Remember the cut off boots? It doesn’t look like that in the preview. Here they are side by side, the published site on the 1920px screen to the left and the preview of the 1920px breakpoint on the right.
Why is there a difference between 1920px preview and 1920px published?
- Next thing is mobile. You can see above that landscape and portrait are supposed to look a certain way, but that’s purely in preview mode. When I publish it, it looks anything but like that. Check here, it looks completely wrong on my Samsung S10+ See below:
In closing, it’s clear I’ve made some fundemental errors here, I really have tried to watch several Webflow tutorials and have read posts on the forum and while I have gleaned a lot from that nothing has quite homed in on my exact issue other than possibly the fact that my understanding of responsive design needs work. I suspect that if I had a broader understanding of responsive design I’d have this figured out in a shorter time frame but since I need help now I consider this my “training”, so any support or advice will be greatly appreciated. Thanks all.
Here is my site Read-Only: LINK