Unexpected Responsive Design Issues

Design help General
1

Hi Guys,

I am trying out web flow for a real design project. The desktop version is as expected but the design don’t look right on an 13in macbook and a iPhone 6+. I have read the tutorials and view numerous videos before I aback on this job. Any help in the right direction will be deeply appreciate and hence continue my webflow design journey :slight_smile:

Here’s the url (draft) and some screen shots.

On my desktop it looks perfect:

One the iPhone 6+ its acceptable:

360×640 289 KB

On the 13inch MacBook the tile goes all the way up. I probably can fix this with flex and margins though:

1366×768 1.29 MB

Scrolling down it’s ok on the desktop but really messed up on the iPhone, 13inch macbook and I think probably the tablet as well (I don’t have one with me right now).

360×640 147 KB

360×640 149 KB

360×640 149 KB

1366×768 646 KB

Don’t want to sound too dramatic but … HELP!!!

:smiley:

Brad

Here is my public share link: LINK
(how to access public share link)

2

Could you please update your post with some more information so we can help you faster? Things like your read-only link really helps us to help you faster :slight_smile:

How to share a read-only link:

Thanks in advance! :slight_smile:

3

Thanks for the tip and email AlexN :slight_smile:

Here it is:

https://preview.webflow.com/preview/ecorganics?preview=e98eac998a440e506a30e1ab5428c429

4

Thanks for that!

The first thing I would try is to remove the 100vh height setting from the image wrapper class. This will allow all of your section to increase their heights based on the content rather then screen height.

Since your hero section has the image wrapper class and a combo class 01 you can re-apply the 100vh height setting there to maintain that look.

I don’t know if this will solve all of the issues you are seeing to once you have made the changes publish the site again so we can take a look.

5

Another thing I see is that @bradwu is adding flexbox to rows and columns!

6

Ah! I think I am getting the feel of it. Thanks for sharing Alex and Antonio. This is a new way of designing for me and it’s a little tricky progressing from muse… Will look into the suggestions. Any more input appreciated.

7

@bradwu, Starting to use Webflow is going to be an enjoyable journey. When you are ready, I would love to hear your thoughts about the transition from Muse :slight_smile:

8

You can learn more about flexbox here and start playing with flexbox and columns widget to see how they work!

9

There’s a learning curve cyberdave, and I feel to those whose background is graphic design, it will be a steep learning curve. Naming elements after elements and understanding the structure of the elements to correspond with the design concept and then to correspond with the invisible code that is written by webflow — all this is a new concept to grasp for graphic designers.

But, the plus is that its virtually instant WYSIWYG, and for me, it improves my workflow as I can dive right into it and present a live website instead of a visual. Webflow is certainly well worth the investment of time to master it right.

=====

Thanks for the link Antonio :slight_smile:

1 Like
10

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