The Problem:
Hi everyone, I would love if someone can help me fix these bugs. I have no clue how to fix this. I have included some photos.
As you can see, the colors can be seen in the editing mode, but when you look at the published and preview mode, you can’t see any of the colors for the cards except for 5?
Also, there is a problem with the mobile view… Why does it look so messed up on the non PC form? Can someone help me fix this such that the mobile version can be seen properly?
Here is my site Read-Only: 1 Also included the published site link 2
You’re changing the BG color on the elements within your interaction and that’s overriding the colors you’ve set on the element. The interaction isn’t active in the Designer unless you enable the “Live Preview” within the interaction panel.
Edit: In terms of the mobile issues, you still need to design the other viewport widths available at the top of the Designer window. From what I can tell, you haven’t made adjustments on any of the smaller breakpoints.
I’d recommend checking out this tutorial in the Webflow University that goes over responsive design.
Thank you so much for this. I spent the whole day trying to do these things. I think as time goes on, I will look into if we can create intermediate basepoints so that I can finetune the container I have. As well as the problem with the text.
Speaking of text, For the title, when I expand the width of the window, the title stretches out automatically. But for some reason, the paragraph and photo does not stretch in the moblie and tablet form, and I do not know why… Do you have any insights on how I can fix this??
I have tried adjusting the scale in general so that at least it can look normal for the stamdard mobile basepoint, but it is not dynamic at all
@mikeyevin By any chance, I have tried to fix the sticky-cards in the mobile basepoint and for some reason, it is not centered. Whenever I try to resize it so that it can be in the center in the smallest window in the mobile version, then expand it to the max window in the mobile version, the cards don’t scale properly, or is off-center.
Do you have any advice on how I can fix this issue?
So this turned into a longer video than I originally intended, but I think it covers a lot of the ideas that will help you out in getting these issues fixed.
Like I mention in my rundown above, my suggestion is to take what you’ve learned within the platform up until now and start over with a cleaner structure of your elements. Probably not what you wanted to hear, but this will give you a project that’s easier to manage and it will provide you with a better structure to grow off of. Obviously the changes I went over helped with the appearance of the site on smaller breakpoints and I have no doubt that you could follow along and fix most of the glaring issues, but without some more significant changes you’ll be setting yourself for failure down the road.
Don’t hesitate to reach out if you have any other questions and good luck
