Skip to main content

Best practice to responsive?

Hi there! Hope your week was great.
I'm using my own (rebuilding in progress) site to test and practice with KP :-)
And.. even with the updates, and creating my "own system". I get challenged by KP!
I'd like to get my image responsive!!!!! And it's not... So my question is : what would be the best practice please?
On desktop: fine! On other devices... it's another story... (I'll add screenshots in comments. You're thoughts will be appreciated :-)

1.00

here's the behavior of the image on phone devices and "between" phone and tablets.
(the phone number button is a bug from header - just forget it ;-) )

Mathias G

Claire Négrier Looking at your screenshots, I don't think I would focus only on making the image responsive. I would probably look at the responsiveness of the whole hero layout first.

It looks like the desktop composition works nicely, but at the smaller breakpoints the text and image no longer have enough room to work together. I would probably keep the two-column layout on desktop, then adjust it on tablet and stack the content on phone.

I would also look at using KP's fluid typography for the heading and avoid fixed widths/heights where possible.

Without seeing your actual settings it's difficult to say exactly what's causing it, but that's probably where I would start.

Mathias G Yes, That's my thoughts too!
But looking to the KP concept... I was wondering if another way could be applied 😉
Thanks for the confirmation 🙂