How can I get my project titles to be responsive with the images they overlap? Also, when I resize the browser with these title divs in place, it will resize the two left images, but not the two on the right side. When I comment out all the title divs, the images are perfectly responsive and resize just fine. It took me so long to get those project title divs positioned where I wanted them. Though I don’t know if I did it in a funky way that just made things harder. Any help would be greatly appreciated.
You are overcomplicating the grid, you can use an auto-fit grid and use much less CSS.
Then make the titles absolutely positioned child elements of a relative parent container and do their position using offset and negative margin.
Just as an aside, if elements share styles you should use a class and not ids. If you ever find yourself repeating styles inside id selectors you know it should be a class instead. I would suggest not using ids at all for CSS, they have too high specificity and will often cause trouble in the long run. They really offer no benefits when it comes to styling I find. Edit: just remember to keep the ids that are part of the challenge requirements, you do not need to use them for styling but they have to be in the HTML.
Here is an example
You can fork it and look at the code. I will delete it when you are done just let me know.
@lasjorg Thank you SO much. This was much more than I was expecting. One silly newb question…I don’t know what fork means. I expanded the editor frames and took a screenshot of the ‘projects’ html and related css. I’m really grateful. I spent so many hours over several days trying to understand grid better. Your post and the code and the comments within the code are all very helpful for me to understand it better now that I can see it working. Thank you again.
