I’m having a lot of issues with making my site responsive, I’ve only built the homepage but I’m having problems making it responsive across all different screen sizes.
Main issues are:
images resizing across all devices every time I try to edit sizes to fit screen sizes
arrows disappearing despite adjustments to padding
grid for ‘Design Process’ not fitting or resizing properly
hero image keeps cutting off at the bottom in preview mode despite adding padding and it looking fine in creation mode
If anyone wants to help w editing the content please let me know I’m trying to get my portfolio done as soon as possible as I’m working to a deadline so need it working ASAP!
Regarding point #4 (hero image), I’m not really getting what you’re trying to say, and I don’t see a lot of difference in the image between the designer and the preview mode, but try out these settings just in case:
Now regarding the grid in point #3, just a quick note, always apply the padding to the container than the elements inside the container, that would be better. And don’t place content inside the grid randomly, always use a div element to nest the content inside.
Now to solve your problem, I think you will need to use divs first, and if that didn’t work, you’ll need to reconsider the phone layout for responsive behavior or simply use flex box with wrapping.
Here try what I did here (please note, I’ll be deleting this template in 3 days) https://preview.webflow.com/preview/helping-d0aec3?utm_medium=preview_link&utm_source=designer&utm_content=helping-d0aec3&preview=474aba60011a3802c72fa90d93539265&workflow=preview
also watch out for the heading order. Generally a page has only one H1, follow up sections start with H2, and sub headings H3, sub of the subheading H4, and so on.
and the padding should not be used to determine the position of elements.
