Streaming live at 10am (PST)

Need Tips on how to make website mobile-friendly

Hi guys, I’ve just started designing a portfolio website. I have very little experience - it’s passable on laptop, but it still doesn’t look great on mobile at all. Could someone give me tips please?

This is my current website link


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey Pipob

Great to see you here, welcome! :slight_smile:

Starting out with creating websites can be difficult. I’ve noticed you’re using a rich-text element for all the content in your portfolio. Think about your site as a collection of boxes. You put every heading and every list and text into a single box, therefore it can be impossible to make it look good for all sizes of screens! Try using the default text elements outside the richt text and if you need to alter the style for smaller breakpoints you can do so easiily!

Here’s some useful information:
https://www.w3schools.com/html/html_layout.asp

Try learning about html and css, Webflow makes creating websites easy without code, but you need a basic understanding of the core concepts first in order to utilize Webflow

1 Like

Hi Daneel,

Thanks so much for the advice! I’ve switched the page elements from rich text to just html. It looks great on my phone

But when I tried it on a bunch of others it looks a bit off.

I could just change the layout for every possible size, but do you have tips for how I could adjust layouts for different pixel sizes in a more systematic way?

Try using flexbox for to help things lay out more tidily.

here’s a quick video https://drive.google.com/file/d/1FHUdojhH-86Gv13nHJWRTSO1Ty9JuJno/view

2 Likes

@Jonathan_Holden thank you so much! I’m definitely going to be spending the next few days looking for more resources.

1 Like