You’re welcome. Happy to help
I see where it’s gone wrong a bit.
Here’s my thorough review;
- The hero section (yellow background) - Your main heading should be H1 and a text block instead of an image, for SEO purposes. Why not have the cartoon image in it’s separate div block instead of a background image, because in responsive mode the cartoon image and the text image are trying to fight against each other to show in the center.
Instead, have both in separate div blocks / columns / flexbox and the yellow background image as separate. This way, in responsive mode the cartoon image and the headline text will stack on top of each other.
Also the headline text image has -200 margin top, you’re best off using a flexbox (2 clicks will make the text display center of the section. Video tutorial https://flexbox.webflow.com/#split-screen
- In responsive mode, your drop down menu displays ‘MEET VANESSA’ in the middle whilst the other nav links are in their normal position, this is because you’ve set it to display inline. Best practice is to use font align center.
Please note; when you make design changes in tablet mode, the style will cascade down to landscape and mobile, which means you don’t need to make substantial changes again, only small ones like reducing the font size etc.
In the hot pink section, the heading in column 1 has -76px left margin and -194px right margin. Set both to 0px. To change the column width, select the column element that your font or icon is placed on > right click and go to settings > grid options > customise the width.
Your icon images should be retina. Minimum size should be at least 1080px by 1080px. This will display crisp sharp in responsive mode and you can easily control the size to be medium / small. Currently, your icon sizes are 256px which isn’t great.
Avoid setting minus left & right margins to headline and text blocks, to center it just use the text align center option.
Hope this helps.