Submitted almost 2 years ago

Huddle landing page with alternating feature blocks

Mohammed Ahsanul Kabir• 190

@mdahsanulkabir

Preview site View code

This is a solution for...

HTML
CSS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello there. Thanks for checking out my code. Can you help me by providing some idea about positioning and sizing of SVG components?

Thanks in advance.

Community feedback

faizan• 2,420

@afaiz-space

Posted almost 2 years ago

Hey @mdahsanulkabir, I noticed an issues. remove all property from .header-logo svg { scale: 0.5; /* position: relative; */ /* left: -40px; */ }. scale property work with transform example:- transform: scale(0.5);

Mohammed Ahsanul Kabir• 190

@mdahsanulkabir

Posted almost 2 years ago

Hey @afaiz-space , thaks a lot. I put justify-content as 'space-between', but its not working. SVG doesnt go to all the way to the left. .header-logo { display: flex; **justify-content: space-between;** align-items: center; } Any idea. Thanks

faizan• 2,420

@afaiz-space

Posted almost 2 years ago

@mdahsanulkabir <header><img src="" alt=""> <button></button></header> And put as many sections as you can in a separate section. are you on slack.

Dewan Masuma Nazneen• 295

@mnazneen20

Posted almost 2 years ago

You can use the class attribute in your SVG element and use styling for positioning and sizing your elements as you wish. Try using HTML semantic elements in your code for a better approach.

Mohammed Ahsanul Kabir• 190

@mdahsanulkabir

Posted almost 2 years ago

Hey @mnazneen20 , did you meant like this <svg class="test" width="240" height="39" xmlns="http://www.w3.org/2000/svg">

But its not working. .test { transform: translateX(-20px); any idea what mistake i done? }

thanks

Dewan Masuma Nazneen• 295

@mnazneen20

Posted almost 2 years ago

@mdahsanulkabir I think using svg.test selector will work in this case.

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord