Hello I am using your single muse pag on my blog and th icons aren't loading correctly. I've tried repasting the cod but nothing worked. Do you have any suggestions?
hi @ladydestroyerofearth! Ahh I see, you mean the icons on the single page 2!
This is actually something I noticed a while back but life™ has gotten in the way multiple times BUT I'm fixing it right now.
So the reason why they are breaking is because the original icons that I was using were links from a public library and they've clearly been removed since 🙃 so I've just uploaded the icons myself and hopefully this won't happen again.
I've updated the code on the paste bin (this is the same as the one on the original post) so you should now have the icons working :)
A tip, if you want to change them yourself to whatever icon you desire: on the pastebin on lines 594-596 you can change the src of the images there to whatever (png, jpg, SVG) you want!
Hi sorry to bother you! I really like your multimuse #2 page theme and want to use it, but is there a way to change the grid so the muse images on the left are smaller and the grid would fit 3 or maybe 4 images instead of just 2? I've been playing around with it, but I just can't get it to work (I've never worked with grid before and I don't quite find what I'm looking for on the internet). Would be very grateful for help but if you cant that's fine too :)
Hi! :)
Of course, I'd be more than happy to help thank you for the kind words! 💖
Looking at the code I really see that I could have made these things easier to customise but you live and you learn :')
So I've made some (very quick and dirty) changes for you to try out (and I'll explain after)
For three smaller images on the left
For four smaller images on the left (though on this one, I would suggest removing the quotes in front of the images altogether because it's too big as it is, you can always make those smaller too :) )
I also realise that I need to update the assets for the icons… sorry about that, I will do that at some point…. just not right now :')
Finally, going under the cut is the explanation of what I did and some resources if you want to explore more the CSS grid :)
Once more, thank you and I hope this helps!
Alright, right off the bat here are some resources that have helped me understand the grid (or, at the very least, have my life doing things with it so much easier)
grid garden: a game where you will be using the properties of the tool to water your garden and make carrots grow!
a complete guide to grid: more confusing and a bit more intense, but really good for a quick visual of what things do
There are situations where you might not want to use the grid (for more reasons than one: no support for your browser, some specific issues that make it harder to work with), so in case if you don't know, there is also flex that is great:
flexbox froggy: a game where you make the frog jump to their lillypad by using flex properties!
a complete guide to flexbox: more intense again, but I think because flex is easier, so is the documentation as well to follow
As to what I did (and keep in mind I didn't spend that much time so if something is funky just..... don't mind me :') )
I'm using the example for the four images but it's the same for the three just with different values. The lines that have a blue square were changed, the green ones were added.
The .muse-selection is where I define how many columns things will have and how big the content (width) within it can be. The thing is, if you change only the width then the image will be funky because the height of the images is too large, so I adjusted the .muse to have a more appropriate height.
Also I had to add align-self: start and grid-template-rows to make sure that the height of the grid doesn't freak out (it should have been something I had when I first shared this page)
In a better world I would have done this automatically so you didn't have to worry about this, but alas.....
In order to keep it responsive (so that if you have a smaller screen it doesn't look broken) I've also updated the media queries to make it look good :)
