Skip to content
OverviewSolutions
2
Comments
2
Dinkar Jallan
@dinkarjallan

All comments

  • Dinkar Jallan•30
    @dinkarjallanPosted over 3 years ago

    hello aastha,

    I'll advice using img tags instead of svg tag , and then styling it like any other image. but however, if you're trying to make interactive SVG, then consider using the iframe tag, or the object tag for it ( read at MDN for documentation on these tags). OR you can also edit the SVG my wrapping the svg tag in a div tag and styling the div as desired, and since SVGs are scalable, it won't be such a sweat breaker.

    personally, I'd use the img tag method, simply because its easier to handle.

    I hope this either helped you or improved your understanding. Do consider visiting my Github(https://github.com/dinkarjallan), I'd really love to have some like-minded friends around the globe.

    thank you.

    0
  • Dinkar Jallan•30
    @dinkarjallanPosted over 3 years ago

    hello Lauren, ~ I would prefer using non-Static units like '%', 'em' and 'rem' , this would help the viewport to automatically adjust the the widths and heights according to the proportions set by the CSS values. ~ Next, I would suggest adding more breakpoints to the design. My personal favorite is adding maximum 2 breakpoints between two subsequent device sizes, that is For ex. between 1024px and 1440px screen widths, i would very likely add breakpoints at any where n between those widths ( depending on the design and layout of the website).

    ~ lastly, I would also suggest using CSS layout tools, such as flexbox and CSS Grid. using them will also help in positioning, and you will end up using lesser margin and padding properties, which will eliminate the overwriting of properties multiple times.

    I hope this helps. If it does, do Contact me through my GitHub (github.com/dinkarjallan), I would really like some developer friends across the globe.

    Thank you

    0