Resposive website issue

https://preview.webflow.com/preview/paulina-fujiya-web-design-website?utm_medium=preview_link&utm_source=designer&utm_content=paulina-fujiya-web-design-website&preview=fe2a7126987223458a21db0f9c4a6ece&mode=preview

Hi everyone!

I’m building my first Webflow website and I got stuck with this issue - about sizing and position. Any idea how to fix it so when you have smaller screen the content is adjusting?

I’m still learning and kinda making the color background messes my mind with that!

I’d really appreciate your help or any advice!

Hi @Paulina_F :wave:

Welcome to the Webflow Community!

:clap: Brava for building your first Website.

I took a look at your site and I see the issue with sizing and positing: It’s to do with the use of EM units for element width and relative positioning.

When it comes to responsive design, using the right units and styles will make your design responsive by default on all devices and will require minor tweaks on smaller devices.

Less is More. In general, if you see that you need to make a lot of changes on smaller devices to make sure page responsive, it means you need to fix the design on the desktop first.

Here’s a ~10min video where I show you how to fix some of the issues on your site:

I highly encourage you to check out the following resources and Webflow University to learn the best practices of responsive design:

All the best!

4 Likes

Hi Anna! :blush:

I don’t really know what to say and how to thank you enough. The fact, that you have spent the time to record this tutorial for me and point out my mistakes just blows my mind. I literally started crying and immediately felt so grateful for your help and advice, that I really can not find the right words to express myself. THANK YOU THANK YOU THANK YOU SO MUCH!
I will do my best to learn more and correct my mistakes, I’m forever grateful for your help and kindness.
If there’s anything I could do for you, please let me know!
P.S. I will definitely send the link to my website once I finish it, so please look forward to it, I’ll do my best! :muscle:t2:

4 Likes

You’re most welcome, @Paulina_F.

Knowing that my video was helpful and your sincere and kind words are enough :heart:

I believe in you! You can learn and make a super awesome site! :muscle:

Remember your free resources: Webflow University and this Forum.

I’ll be standing by to see your finished website!

All the best, Paulina!

1 Like

Hi Anna!

I’m sorry for bothering you,
I have almost finished my website, but I just realize, that some parts don’t work as they should be, when I publish the website on mobile and tablet the icons start moving down, even when in the editor on my PC it looks fine :frowning:
Any ideas what am I doing wrong? (cuz I’m sure I am doing something wrong :see_no_evil:)
I’d be grateful for any advice! :white_heart:

https://preview.webflow.com/preview/paulina-fujiya-web-design-website?utm_medium=preview_link&utm_source=designer&utm_content=paulina-fujiya-web-design-website&preview=fe2a7126987223458a21db0f9c4a6ece&pageId=6048430426391c525e451504&mode=preview

Hi Paulina!

I am loving your site! It looks amazing! You did it! :muscle:

As for the icons issue. I wasn’t able to see the issue on my phone. Were you able to fix it? If not, can you please tell me a little more about the issue so I can help you resolve it?

  • On which page are you observing the issue?
  • Which icon or icons are you moving when they shouldn’t?
  • Can you share a video of the issue? [Apple] [Android]

Any information you provide, can help me help you resolve the issue.

My best,
Anna

2 Likes

Hi Anna :wave:t2:

Thank you so much for your reply and your kind words! :white_heart:

Yea I fixed the issue with icons, I was digging into why I had this problem and I solved it, it was because of the wrong alignment :see_no_evil:

I think I still have some issues there on my website, I don’t know why the navbar icons on the homepage are differently aligned compare to other pages. I’ve already launched my website so please feel free to explore in the browser and I’d be really grateful for your feedback and things I could improve :white_heart:
Here’s the read-only link: https://preview.webflow.com/preview/paulina-fujiya-web-design-website?utm_medium=preview_link&utm_source=designer&utm_content=paulina-fujiya-web-design-website&preview=fe2a7126987223458a21db0f9c4a6ece&mode=preview

And here’s the link to my website: www.paulinafujiya.com

I’d be grateful for any advice :white_heart:

Best regards,

Paulina

Hi again Paulina :wave:

I’m so happy that you’re learning super fast and you’ve launched your website already! :tada:

That navbar was tricky, but I found the issue. It’s a styling on the current state of the brand link within the navbar.

I explain more in this video:

1 Like

Hi Anna! :wave:t2:
Thank you so so much! Yea that was an issue I couldn’t figure out, thank you so much again for taking your time to record this video and help me, I really really really appreciate that, it really means a lot to me, because without your help I think I would never be able to move on with the website building. I’m forever grateful, thank you for pointing out my mistakes and teaching me the proper way :white_heart:

1 Like

Woohoo! Go, @Paulina_F! So thrilled to follow along here — digging your site’s design from the color scheme to the interactions. Huge props to @AnnaKelian for jumping in and giving such clear guidance here, too — one of my favorite people (and most knowledgeable!). Keep up the great work, @Paulina_F! :clap:

2 Likes

Thank you so much for your kind words :white_heart:
I’m really grateful for Anna’s kindness, I was at the edge of giving up, but she saved me :see_no_evil: I’m really grateful for you guys doing all this phenomenal work and helping people become better, it is just another proof to me, that I have chosen the right path and hopefully I’ll be able to spread the knowledge about Webflow to my future clients.
Thank you so much again, I really appreciate your help! :white_heart:

Paulina, it was all you!

It started with you posting here, on the forum. You didn’t give up. Your willingness to complete this project and to learn allowed you to take my advice and instructions and turn them into a beautiful creation of your own.

Keep learning! Keep asking for guidance! And you’ll excel in anything you do.

It was my pleasure to help you launch your site. :white_heart:

1 Like

Thanks @McGuire :see_no_evil:
I learned a few teaching tricks from you :wink:

Thank you so much again Anaa, I really can not find the right words to thank you enough for your help! :white_heart:

I will keep doing my best and keep learning, thank you for your guidance! :white_heart:

1 Like