@ChristopherParke
Posted
Hi there, I can see you put a lot of work into this. What I've noticed is that the live results don't match the designs quite accurately enough.
Mobile - if you inspect in the browser you will see that at the smallest mobile size, most things are cut off and you have the dreaded ghost side-scroll (some element is sticking out, creating a horizontal scroll bar you don't want). Also, quite off center.
Part of your problem (I think), is using relative measurements for your media queries. I would get in the habit of using pixels there. Also, same goes for your pictures. I wouldn't use dynamic sizing for image sizes. the reason is it's too unpredictable. What's better is to have a few different pixel defined sizes at different media breakpoints. Gives you much better control over results.
A lot of what you did in the code seems quite haphazard, over-engineered, and a bit difficult to follow. You should try to simplify the way you're thinking about it, because your html shouldn't have media source files in there to change images for one. You have absolute positioning all over the place, which would be better dealt with using grid most likely.
I think your biggest take away, is go do a couple grid tutorials to understand how other people are using it. You're kinda tunneling through the woods, right next to the easy path, if you get me.
Good effort though my dude. keep it up!
Marked as helpful
@DanoSvK
Posted
@ChristopherParke thanks for suggestions. I will definitely look into it and apply your suggestions in my next project. Also, I tried to use grid, but it did not work well for me here. I guess I'll try to look into other people's solutions and see wheter and how they did the grid here. Also I'll try to look into those images. But I couldn't get the same satisfactory results without using picture - source media.
