I’ve been working on this homepage, on the desktop I’ve made the site on, I’m pretty happy with it.
The problem is on desktop as the screen size gets smaller, it starts to get a bit messy. One thing I’ve noticed is the body text under ‘Window Blinds in Nottingham’ goes into an extremely long column when viewed on an iPad mini in landscape mode (which displays desktop not tablet view).
Things like the logo which is set to display at 20% on desktop, looks fine on a large screen but on a 13 inch MBP it’s too small.
Is there any way around this and getting things to look right for desktop across different devices? I’m trying to use %, vh, rems etc rather than fixed sizes.
Your site is okay. You have to adapt the design of each element for every device, starting on the desktop and down.
So your design for desktop is ok. Click on the tablet icon at the top of the Designer in Webflow. now review your page and change what needs to be changed: reduce a margion or a padding, reduce the text and title size, decide how a column element should behave… It won’t affect the desktop, only the devices under the current one.
Once it looks cool on tablet, switch to landscape phone and repeat. Sometimes you have to do some heavy changes, using the positon or the float properties.
Once you’ve styled the site for all devices, publish it and test it again on ipads and phones.
Thanks for your reply. I understand editing the site for each device.
My issue is getting content to look good on desktop, across the variety of desktop resolutions and sizes there are. For example, there are some small issues with how text starts to stack on 1400px wide compared to 1920px wide.
Is there anyway to get the tablet design to display for both portrait and landscape tablet view? iPads for example start showing the desktop view because of the resolution and this is causing me some problems.