Help with responsive versions of site

Design help General
1

Hello. I have created a small website and am attempting to style the downward the responsive versions of the sita and am having difficulty. I am assuming I have not done a good job of laying out the initial site (it works fie in desktop format) and it is causing problems as I create the responsive versions.
Could someone take a look at my site and its layout and offer guidance? I have watched all the tutorial videos but I am confused on creating the correct values for things (% vs px) to get things to work.

Here is my link:
https://preview.webflow.com/preview/mixt-creative?preview=8b04f0bc58240148659fb55c85ae761d

Thanks

2

Can anyone take a look please?

3

Hi. You added link to empty site (body and thats it).

Px VS % - in general (Of course it always depends on the style you want):

  • Grids/layout: % (and/or flex) and great build-in feature columns(flexbox grid)
  • Padding/margin - % but most of the time px (Beacuse it easy to work with 5px/10px/15px instead of 0.005% and so on - for small units)
  • Images - 100% width of the parent (responsive)
  • Container - max-width (by px)
  • h1-6,p - No w/h setting most of the time (By deafult 100% width → block element)

related:

Also google it. Any article/youtube about this topic relative also to webflow. Example:
https://responsivedesign.is/guidelines/

4

Hey thanks for the response. Sorry for the blank site, out of frustration I deleted all of the elements of site and was going to start from scratch. I restored it if you want to take a look. I had made several attempts at making it responsive but I was chasing my tail. I will also take a look at the materials. Thanks again

5

Your main “mistakes”:

  • On mobile do not add fixed (px) height (Whats happen if the user enlarges the text? very small size screens and so on)

  • Absolute Positioningsalad - You add endless times position Absolute for changing vertical position (Use margin or padding!!) - like this its really hard to layout the site on mobile (Elements overlap + You see text in green-section but the text related to “red-section” hard to design like this). Read about “normal flow” her

  • If you want bg-image + opacity bg-color (overlay) create multiplie bg (Avaible on webflow) - you create empty div with BG-color than move this div by Absolute to be on top of img-bg (wrong practice)

  • last - on mobile if you take 100% width element (heading + p) and sets is position to Absolute - left: 300px; part of the element is now out of the screen!!

Strips/section: look her on the structure
(div with padding-top/bottom + optional bg color and thats it!)
https://getuikit.com/assets/uikit/tests/section.html

Summary: you could create entire site without Absolute (by flex, by grid, by margin-padding, align and so on). This is why your site is so broken on mobile. Use Absolute only when you need (Example: To put small icon in a corner of a box/div. Example)

6

Do you mean Relative Positioning? I am not seeing where where I used Absolute. This is an in progress version also that I restored it seems. I am still going to start over and try to incorporate what you are saying.

7

I remember absolute. Anyway, also relatively is not so good for responsive layout. The same idea - use grids, sections (like uikit sections = “strips”), and so on.

Why not work with template and “see” by-example - how to create responsive project.

8

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