Skip to main content

Forums

This topic contains 9 replies, has 4 voices, and was last updated by  StormFiber 1 week ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #294183

    Luxas
    Participant

    Hello,
    im 15 years old and from germany;
    Sorry for my bad english and my bad code.

    I have 2 problems on this website (lucasmucmc.com/contact):

    HTML:
    lucasmucmc.com/contact/index.html
    CSS:
    lucasmucmc.com/contact/style.css

    I started learning about SVG today and already have a problem where i cant find any solution int the internet for:

    The Red Stars on this page are working fine for (WIN10: Chrome, Firefox, IE, Edge); but on the Safari browser on my IPhone they are Invisible…
    But after trying a long time i figured out if i remove from (line 84 of the html code) the ‘height=”5″ width=”5″‘ attributes, it is visible on my IPhone BUT it is now in the completely wrong place in Internet Explorer.

    To show it to you i removed ‘height=”5″ width=”5″‘ by the first star (the name input) on my webpage that you see bouth ideas at once.

    The second problem is again ONLY IN SAFARI MOBILE:

    I dont know why but if i set the margin form (line 37 of the css code) to 0 there is still an margin left and right around the form. The same thing is with the padding (line 36 of the css code) in the form. To make matters worse the Input fields dont have the same size like the send button.

    PLEASE HELP!!

    Thank you,
    Lucas

    #294184

    waydeshepard
    Participant

    For the first problem, have you tried setting a class on the svg icon and then setting the width and height in the css file? as for the second problem I suggest using something like Normalize.css it might help with your margin and padding problem

    #294189

    mapesa123
    Participant

    hello

    #294245

    Luxas
    Participant

    I already have included the normalize.css and I have set a class on the svg (.star) to control the Color, the position and height :(

    #294252

    waydeshepard
    Participant

    I fixed your star icon problem by extracting your svg path data to a symbol tag at the bottom of the page, and then xlink:href them to where you had used the svg in all the spans. Heres a pen solving your problem so that you can follow what im saying. I also added padding:0; and width:5px; to the star class. Hope this helps you some :)

    See the Pen
    Star Problem Fix
    by Ryan Shepard (@rshepard21)
    on CodePen.

    #294263

    Luxas
    Participant

    Thank you @waydeshepard for your help.

    But three more question: Is there an need for the “>title>star_icon>/title>” tag? And why have you removed “xmlns=”http://www.w3.org/2000/svg”” from the svg tag? And by searching in the internet (to understand your solution) i found on the mozilla developer page this snipped “xmlns:xlink=”http://www.w3.org/1999/xlink”” for adding in the svg tag. Is any of this required or usefull?

    I added “fill=”currentColor”” to the path element to make it red again.

    Thank you,
    Lucas

    #294266

    Luxas
    Participant

    I fixed the 2nd problem by removing the @supports rule.
    It should adapt the website to the Iphone X, but it looks like it is not working properly.
    Maybe it’s because I have the “IOS 13 developer beta 6” on my phone, which is still a beta, and thus apple has not fixed all the bugs.
    Maybe it works on every other iphone.
    But for now I will remove it.

    However, I have bad news. I found a new bug; There is too much space under the form, it should be the same distance above the form as under the form (5vh; line 37 css). Why is it not working? :(
    This problem is in every Browser…

    I think the solution is easy, but im just to stupid…

    #294331

    waydeshepard
    Participant

    On the svg at the bottom of the page, add display="none". As for your other questions I myself hardly ever use xmlns=”http://www.w3.org/2000/svg it is totally up to you to use that.

    And to my understanding in the symbol tag the title isn’t really required. I just use it so that i know which icon is which.

    #294357

    Luxas
    Participant

    Thanks @waydeshepard,
    all problems are now fixed. :)

    I’m really glad someone took the time to help me. I wish you a nice day and good luck with future projects.

    Best regards,
    Lucas

    #294544

    StormFiber
    Participant

    Hey, I already have included the normalize.css and I have set a class on the svg (.star) to control the Color, the position and height.


    Reading Parallel Paradise

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star