Submitted about 3 years ago

Sunnyside agency using SASS & Vanilla JS. Mobile first approach

Kris Pietrzak• 340

@krisp-dev

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Agency landing page

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Definitely underestimated this challenge, looked like an easy design to begin with but it got harder and harder going from Mobile to Desktop widths.

Ended up once again using inline SVG's as I couldn't get anything else to work. At the start I tried doing the following:

Adding an id="img" to the SVG file itself
Changing the fill value to fill="currentColor"
Calling the SVG in HTML

<svg class="svg-image">
     <use xlink:href='../images/nameOfImage.svg#img'></use>
</svg>

And then changing the fill value by targeting the SVG's class name.

It all worked well however I couldn't manipulate the SVG's height and width even by hard coding these values. It kept getting the default SVG 300x150 values applied by the HTML.

Community feedback

Nazeer Haidari• 895

@Nazeer2020

Posted about 3 years ago

Hi, the mobile navigation bar is not centered properly, please check

Kris Pietrzak• 340

@krisp-dev

Posted about 3 years ago

@Nazeer2020 Hi, can you specify on what width (px) that happens?

https://prnt.sc/1s10842

As per screenshot above, I have it centered on mobile width (375px) as per the design image. As the width gets larger I have it aligned to the right side - right underneath the burger icon. Personally, I think it would look out of place if it was centered at all widths.

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