SVG's not visible
Hello everyone, I'm building a clone of the Apple website to improve my HTML and CSS skills and I've run into a couple of issues:
First of all, can anyone tell me why the SVG's for the Apple Watch and Apple Card aren't visible? If I remove the styling I can see them, but when I make them smaller, they seem to occupy the space, cuz the title is being pushed to the right, but the SVGs are invisible.
Also, how could I make the gap between the red subtitle and the title of the Apple Watch smaller? Adding padding or margin doesn't seem to work.
Thanks in advance for your feedback and wish you a wonderful day π
https://codepen.io/Adelin-Rosca/pen/V324Oe242VbdsAaF12SDfads
10 Replies
In your code, the size of
svg changes but the size of path doesn't. You can see that if you inspect the elements. Because of that the image doesn't get smaller but it gets cropped. So it is not invisible, you just see the space in top-left corner.
To fix that add viewBox to your svg element:
The values are set to its original size. After you add this you can change the size as you wish.
And for the gap, I would delete the <br> between WATCH and the red subtitle, and make the subtitle a <p> instead of <span>. Styling is easier this way. I use <span> for inline stylings. So if it's not important, try changing it to <p>.Wow, thank you so much. The SVG's are displayed properly now. They can be confusing some times, I used them a few times in this website, and every time they were structured differently. That, or I am missing the bigger picture. I need to dig deeper into them.
And regarding the <br> tag, I used it because I had a selector for the first <p> child of any <h3> element. But you were right again, using a <p> tag solved it. I just needed to update the selector to ignore that specific paragraph. Thanks once again for your response, you deserve a beer π πͺ :thumbup:
warning: you're misusing apple's copyright, to the point where you're making a website that looks very similar to the current apple website, and you even use their logo
i would be surprised if you don't get a dmca on your account
if you want to replicate a website, use your own copyrighted logos, even if it is just an image of a banana (made by you) and it's the iprance 15 (with an image of a generic stock photo of a phone)
Would it be ok if I added a disclaimer in the footer, specifieing that it is for educational purposes only and not endorsed by Apple in any way?
I also made the project private and I am not planning to make any more clones anyway, but thanks for the heads up.
If itβs private it should be alright?
Yea, it seems like this is pretty much useless.
It should be, no one can see it
i dont know, but apple is very letigious about stuff like this. i wouldnt risk it
Yea, that's what I've also read. I've made the pen private, so the only way they can find out is if you guys rat on me π
. I will play around with it for a little then I will delete the pen completely. Thanks again for bringing this up, tbh I didn't even think about it, but ig I need to be more careful with copyright'ed stuff
nah, nobody will rat you out here. it's just a fair warning, just in case
better warning you than you being surprised as to why it is gone and you have scary emails in your mailbox
I, too, face difficulties about SVG's. They look good but can be a trouble sometimes.
Glad that I could help!