My website lacks Responsiveness

Hey there,

I am currently trying to sort out a website for myself. I am new to create myself a website as I do not have a budget that allows me to hire to build. Unfortunately, as that would be the ideal route.

Anyway, heres my problem: I have designed the website layout 100% as I would like it. This project works well on my macbook pro so I thought it was all good to start resizing and getting the different break points sorted out. I then started resizing and fitting the sections of the page to look good on the tablet breakpoint. Only to find out that I have done something that doesn’t make this project responsive across what I can assume would be the majority of devices. I’m confused as the High break points work for my viewing are responsive but the tablet down are not responsive. I stopped working past the tablet section once I realized it was not responding well.

I’m hoping someone can help me sort it out and or send me in the right direction. Can I salvage this?

Here is my site Read-Only: [LINK](Webflow - Austin Gallant Tattoo)
(how to share your site Read-Only link)

https://austin-gallant-tattoo-c99583.webflow.io/

Hi Austin.

First of all those tattoos daamn good!

1. Delete all “1000px” height in all sections. That’ the main issue for vertical lack of responsiveness.
2. Set your body to “Clip” on Overview options
3. The structure you want is:
Section: Vertical, Central Flex with internal margins included, work with VW or REM units.
Container: Set to Horizontal flex OR Set to Grid with 2 or 3 columns depending on what you want
Flex children: Those need to be DIVS
4. for image locations, do not work with margins, set images to “Relative” on the position tab and work from there, NEVER, work with pixels, use “VW”, it’s easier and generally better to work with

General recommendations:
Never add margins to position children elements, margins should always come from a parent element and they work better when they are internal. That way makes it better for you to edit them on smaller devices, always do that cascade-wise… meaning go from desktop to mobile in that order.
Always think in Flex Vertical, Horizontal, or Grid when trying to locate an element first.

Cheers

Hey There,

Thank you, I’m glad to see you enjoy my work. Great way to start the day.

I appreciate you taking the time out of your day to reach out and help me with this issue. I will work on getting that stuff sorted out. Your info has raised a question for me to ask.

  1. I can see how using margin to place images can mess up responsiveness. I was really trying my best to get a staggered look of images between where the sections end and begin. Which is why I was using the margin to move them upward as I could figure out a way to make that happen otherwise. Would you know a better way to make that a possibility without relying on margin to move them?

Hi Austin,

You can check these three videos:
on mastering position tools https://www.youtube.com/watch?v=xid4CjWJE1k
on relative positioning https://www.youtube.com/watch?v=JkzQslv_Tus
on structuring your website https://www.youtube.com/watch?v=rkxDqVbL54c

It’s a learning curve so be patient with yourself, that’s how most of us learn :slight_smile:
Have a lovely day

REM is the best for responsiveness. FinSweet addon (free) can help you convert this automatically. Always double check that it converted all sizing as it is still being worked on.
Also increase your word height so they’re spaced out some more and not touching, which it right next to the font size.

For your Instagram you can use code embed. Go to your Instagram profile page click the settings cog icon and select embed. Copy and paste that into the code embed on WebFlow and it will show your Instagram post directly on there.