I had to modify for each screen width (responsiveness issue)

Community resources Bugs
1

Hey guys, I am very new to Webflow and trying to convert a PSD file to a website, my current problem is with responsiveness, I had to edit by hand for all of the different screen widths which is painful, I think there should be a smarter way. And if there is any help(or correcting the mistakes I know there are many :/) I would be appreciated with it thanks a lot.
https://preview.webflow.com/preview/imageus?utm_medium=preview_link&utm_source=designer&utm_content=imageus&preview=ae312e34c986955bdaed686c60f65416&mode=preview

2

I am really confused by this.

You’re trying to make a Photoshop document a website? I looked at the live preview link and it takes too long to load because you have a 3.36MB Image within the project (the maximum your images should be is somewhere within the 200 kb region) and the website was blank so I’m not sure what responsiveness it is you’re referring to

3

I meant the navbar and the slider should respond accordingly for the given width but they not this is just a beggining for the website btw.

4

Welcome to the community @ahmet_efe_Akin!

If you haven’t already, I’d recommend checking out the free training videos within the Webflow University:

There are a lot of things you can do to minimize the necessary work across your breakpoints to ensure it’s properly responding to the different screen widths, however there’s almost always going to be a step where you click through the breakpoints and edit styles.

A quick tip, make sure you’re building your site out on the base breakpoint (the middle one with the star icon) fully before moving to making the design work across other breakpoints. Most elements are “responsive” (to some extent) by default so you won’t need style changes unless you find that they don’t work on a specific screen size.

Hopefully that helps, but if you still are having issues after taking a look through the University content you can always share some screenshots of your design so we can get a better idea of what the end product should look like :+1:

5

sorry I didn’t see this message earlier. Remove all the width values you set for the “nav menu 2” You should organize it using Flexbox

6

Hi, @ahmet_efe_Akin! Welcome! :wave: Building a responsive site from Photoshop certainly has its challenges, but we’ve all been there and we’re here to help!

Two quick notes on resources that cover the basics here:

  1. We just releaced the 2021 design portfolio course, and the first three videos cover the basics of the box model and configuring the navbar. 21 day design portfolio course | Webflow University

  2. Our team posted a guide that covers translating from static mockups (Photoshop, Sketch, Illustrator, etc.) to Webflow. I strongly recommend checking it out! https://webflow.com/blog/from-photoshop-to-webflow-how-to-turn-static-mocks-into-live-websites

7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.