Designer vs pc or cell phone

Design help General
1

https://preview.webflow.com/preview/armands-finishes?preview=cbcb8569b911b95309739f6e6e772aab

I have everything positioned the way I want in designer on my laptop. When I open the site on my pc or especially my galaxy note 4 things are in different positions Not good!! What am I doing wrong, or what could I do different to make my site look the way it does when I publish it from my laptop.

2

Hi Tom!

In total honesty, I opened your site three times and closed it without answering, because your question is hard to answer, due to the structure of your page being… well, not ideal. The page lacks of a basic clean structure with containers, and a lot of elements are positionned using :absolute, wich makes the responsivity difficult to achieve.

So if you’re up to rework the structure, here is how you could start:

Note: during that process, avoid touching this, as much as you can:
http://vincent.polenordstudio.fr/snap/ld8ob.jpg

Make the header part

  • drag a section
  • drag a container inside it
  • drag a columns elements and redo what you have done for the header, trying not to use positionning, but rather margins and paddings.

Make the menu part

  • drag a section
  • drag a container in it
  • drag a navbar element in the container and redo your menu styling work.

For the rest, proceed the same way: a section, a container in it, then your content. Avoid using positionning as you don’t really need it here, rather use margins and paddings.

So in the end instead of having a complicated structure, you’ll have a series of Section > Container > content. Don’t mind wrapping things into bigger ensembles, like big haeder, top of page etc. Keep the sections one after another: header, menu, content, footer. You can have several content sections.

The containers will magically keep your site width at the best size for users to view it. And it will center your content. This will facilitate your work.

Start with this maybe and come back.

3

The structure that I used was based on flex box tutorials I watched which only used div blocks.

4

I’m still learning best practices and what to use where. Any tutorial suggestions?

5

@vincent
https://preview.webflow.com/preview/armands-version-2?preview=8549b119cc273892338d434167286f03

I re-did the top section as suggested. How do I make the other views look good without using the position settings? Thank you in advance for your patience.

6

I would advice lose all the flexbox things you tried and just go with:

Section > Container > Put your content inside a container (text blocks, rows, columns, div blocks, links, images etc)

It’s much easier and cleaner. Especially for a beginner! In my opinion, try flexbox once you are ready for it. It’s a nice feature, but definitely not a “must”.

7

Thank you @vincent and @rowan for your advice. I rebuilt the top section with the structure recommended, however I did use flex inside the container as it seemed to work better there than columns. I also got better results putting text boxes set as inline inside of div blocks set as blocks.
https://preview.webflow.com/preview/armands-version-2?preview=8549b119cc273892338d434167286f03
So if you guys could take a look at what I’ve done and tell me if I got it right I would most appreciate it.
Thanks again!!

8

Hey, great, so far, it works well :slight_smile:

9

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