help with my pet profile
Replies
Hi, I'm new to creating pet profiles, but I am a long time programmer so I mostly understand the logic and how to find out how to do things.
Any advice on the following questions about making this profile more responsive:
- can I make the column 1, 2 and 3 into a hamburger menu? is there a way you'd recommend?
- can I make column 2 slip under column 1 first when the view narrows, instead of column 3 going there first and then column 2 when it's even narrower? I feel like that'd look better, but I can't think of how to do it.
Also any general suggestions. I want to avoid having scrollbars on small rectangles in the page because I find them annoying, and most of the example pet profiles have those. I just want it to adjust as gracefully as possible to the size the viewer is using to look at it.
My CSS guinea pig pet Lesik:
EDIT:
I did a similar CSS on Meeshah, but she has weapons. I'm trying to have them all attach to the bottom of the page, but unfortunately the only way I can see to do this is have them all on top of each other. Any way to style each one slightly differently? They don't have IDs and they all have the same class and they don't have a common parent that isn't also the parent of some other things... so... help please!
https://subeta.net/pets/Meeshah
Edit a third time:
No one wants to help me... :(
Ok, well I just read the help other people got and figured some things out. One, I can add my own divs... I had not realized that! Cool.
So... I have a new question. I know that you can use a greater-than sign to indicate you want only direct children in CSS but it doesn't seem to work here? Is there some way to get it to work?
I still haven't figured out the hamburger-menu bit but I think being able to add my own div might help... maybe... probably not! Oh well.
For making a responsive design, I would like to point you to Media Queries, Flexbox, and (for future coding) CSS grid. Media queries may be the way to go currently since grid isn't really complete yet. Have a look at my profile, it uses CSS Grid and media query .
Also, for selecting specific items I would suggest looking at selectors, specifically nth-child and similar selectors.
