Hello - I’m traying to make my website responsive but every time I edit from large down to small by the time I make changes to iPhone screen design - it ruins all the changes (if any) to my larger screen versions… can someone review it and help?
Here is my site Read-Only: https://preview.webflow.com/preview/mdlr-shop-1e784d?utm_medium=preview_link&utm_source=dashboard&utm_content=mdlr-shop-1e784d&preview=4a2ff42df85f043b8b3606b2ff3a74db&mode=preview
@webdev I’ve heard you’re a real pro - maybe you can help identify my key issue here?
Hello! I am still pretty confused because you haven’t mentioned anything specific about what elements you are trying to make responsive and where the problem is starting for you. So we can better help you, try and mention any specifics regarding elements and what you expect them to do and at what breakpoints.
Also, Webflow’s styles cascade down from the desktop breakpoint. Meaning any style changes you make to a class on the mobile screen will not be that way on any breakpoints (screen sizes) that are larger. Meaning styles don’t cascade upwards, only downwards. It is not a mobile first approach.
Thanks for sharing the read-only link. I took a look at it and it looks like everything is resizing ok. I just don’t know what exactly you’d like to be different. Happy to help though. Let me know. Thanks!
Hello @Noah-R thank you for replying - I realized I wasn’t the most specific haha - I’ve noticed when I made changes to the font size (in the first container), the font change would also be reflected in larger screen sizes…
Now that I think about it - I probably forgot to add a second class to every break point so it wouldn’t impact other screen versions. Would that be the reason?
I also notice that some of the text and image elements in the first container would also need to be adjusted after making changes in the mobile… maybe I am missing something?
I did do top down approach - starting at the desktop breakpoint .
Not really because you can’t add or remove classes for each breakpoint. The same class or combo classes will remain throughout every breakpoint. I recorded a video to hopefully help understand how styles cascade. I went a bit too long but I hope you can get something useful from it.
@Noah-R I found that video VERY helpful. Thank you for taking the time to make it for me. From what you shared, it looks like I have a lot to learn haha
I don’t even know different units of measurements can impact the overall design so differently. I thought it was more of preference on how to measure the size of the font. I would love to get your design opinion and see what changes you would make the current typography placement and size for each breakpoint in the intro screen
@Noah-R How can I increase the size of the brain image in the Nav - Image #4 is the tag
There are a lot of tutorials out there on youtube for responsive typography. A channel I really like is https://www.youtube.com/user/KepowOb
Lots of amazing info there!
Hey Noah! Thanks for including this video response - I found it super helpful as well.
I have a side question based on what happened at the end of the vid when you accidentally scrolled horizontally (I think in Mobile view) and found extra whitespace to the right of the main content. I ran into this issue too and I can’t figure out how to resolve it. Can you let me know if you can help with this issue or if I need to repost a new question? Thanks!