*when i load the challenge on the google the the SVGs load but when i try to do it via github pages the SVGs will not load.
*when i hover over the buttons the pages jumps a tiny bit any solves on how to stop this from happening
Hi Od, to fix the images not loading on the live site simply add a dot before the first backslash on the image src <img src="./images/icon-sedans.svg" alt="" />
For the height of the page changing on hover it's probably because you're using <a> tags instead of buttons but I'm not totally sure why hovering changes the height of the page
How do I center the card vertically, I could not get it to work?
Hi Tom, to center the card vertically change the height value of the container to height: 100vh instead of height:100% also you should place the attribution outside of the component inside a <footer>, check the warnings that appeared when you submitted the solution.
I found difficult knowing whether to use relative or absolute positioning to move the text with the .body container. I didn't know if I could use another property or if the position property was correct. This is my first project so I wasn't sure about a lot of things. The button tag isn't responsive. There is a border on the button tag and I couldn't seem to figure out how to take it off. There is like a black outline and shadow that I don't know why it's there. Furthermore the background of the .body container gets smaller as the page is resized to be smaller but the p element doesn't resize. It just spills over when the page is being resized. I could go on about the many things I don't like about my page but I would love to get some feedback primarily on whether relative positioning was correct or if I could have moved the text (by 7%) somehow differently.
Hi Eleanor,, great effort on your first project I don't think it's necessary to use positioning for the text, I can see that you're using flexbox in some parts of your code, try setting a fixed width and height for the card in desktop view that way it stays the same size and doesn't spill over when you resize the page.
This is what I did for this project
main {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.card {
width: 600px;
height: 450px;
display: flex;
background-color: var(--white);
border-radius: 0.75rem;
}
.info > h5 {
font-family: var(--monserrat);
text-transform: uppercase;
color: var(--dark-grayish-blue);
letter-spacing: 0.5rem;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
As you can see I didn't use the position property and only care about the margins and paddings. Also the fonts aren't working but that's ok if it was your choice not to use them.
To remove the border from the button you can use
border: none;
On the button selector
My border seems to always have a shade of inconsistent colors and even though I use the smallest possible width, it still is wider than I want. I would love any solution or fix for that. This is my first time trying Javascript and it was slightly overwhelming. Any feedback regarding my script and/or best practices is very much appreciated!
