Flexbox card Troubles

Hi Dean,

Your inline height style on the second (last) story card had a padding that was less than the first story card. It is set to 173px and your first story card is set to 203px.

Hope this helps and when i return i'll explain in more detail

take care!

Hi Chris,

First off, Thanks for taking the time out of your weekend to look into this.

But they both share the same classes for padding and I made sure not to set any fixed heights, so how has this happened?

Hi Dean,

Viewimg your webpage and code I certainly saw the second card was offset with at first glance what I thought was margin collapse or using relative positioning with some unintended consequences. You are correct in that the same class is being used to style the flex container so it had to be something else. Using Chrome DevTools I scoured the first flex container and the second all of which encompass the cards in your code to try and identify the problem, which is where I discovered the inline rule taking precedence over any other styling method. I'm not sure if you used a predefined template or pre-existing module, although there is no indication from what I can see, to build out these cards. If you did then it is possible for that inline rule to be created without your explicit knowledge. Please let me know if this was a template or module you imported so I can assist further.

Hope this somewhat answers your question but if not entirely please feel free to hit me up again as I'm more than willing to help.

Take care and Happy Coding!

PS One of the most helpful videos I've watched for troubleshooting CSS was a workshop by Guil on how to use chrome DevTools located here then researched more in depth the capabilities of DevTools.

Hi Chris,

Thanks for taking a closer look, but I am still none the wiser as to what is causing this issue, and also why that image is not filling to the bottom of it's container. But to answer your question no I did not build on top of any pre existing code or theme like bootstrap or foundation, all the code has been written from scratch by myself only.

Thanks for the link reference to Guil's workshop video, will definitely check that out.

Hi Chris,

No I don't see any inline styles in that section on the homepage, where is that located?

Ok so now I feel terrible leading you in the completely wrong direction and if you know how to fix the issue i would love to get your feedback. The primary problem is when you add any content to the latest-hero div or the first news-story-card it causes the content to wrap. When the wrapping occurs beyond (what i tested) three lines in the first news-story-card the second card does not expand on the bottom. I removed a line of text and the bottom of all three story cards line up. Make sense?

Don't be, as far as I'm concerned even if I go down the wrong path trying to fix something it's a learning experience - and time learning is never time wasted. Anyway I'm happy to report that I have now fixed the issue, but it involved many many tweaks and changes over multiple lines of code between the different breakpoints to get a desirable result. A lot more work than I thought it would take, took me most of yesterday and the evening to fix it. I felt way over my head at times!!

Is it perfect? no, and the fixes felt a bit hacky in places rather than elegant solutions but it's good enough for now that I can move on to giving the typography a bit of love and mixing up some of those damm repeated images! ha.

However I have also upgraded the navigation system on mobile which I'm really pleased with - again check out the latest version here deanconway.com/bassdrop. Thanks for your assistance with this though man, appreciate that.