Skip to content
OverviewSolutions
16
Comments
39
P
Miran Legin
@miranlegin

All comments

  • P
    Miran Legin•740
    @miranleginPosted 7 days ago

    Hi @Kuzukani,

    i've answered this exact question to another poster which has the same problem as yourself.

    If you want to preserve color of the icon while being able to change the color of the text alone you could import the svg file into Icomoon and export it as SVG sprite. This will download .zip file with all the files needed for this to work.

    You will need two files, symbol-defs.svg and style.css and you will need both.

    Inside symbol-defs.svg file structure will be similar to this

    ...
<defs>
<symbol id="icon-logo" viewBox="0 0 279 64">
<path fill="#c7231a" style="fill: var(--color1, #c7231a)" d="M21.409...

    In your case you will end up with multiple <path> nodes and next you need to identify which one is this text node, it will probably be this one

    <path fill="#091540" style="fill: var(--color2, #091540)" d="M84.789 45.268v-

    You can remove "fill" and "style" attributes which will allow you to change it's color via external css stylesheet.

    Next in HTML file you can reference this <symbol> with this line

    <svg class="icon icon-logo"><use xlink:href="/path-to-this-file-in-filesystem/#icon-logo"></use></svg>

    Don't forget to apply provided stylesheet style.css which you previously downloaded.

    In order to be able to change the color of the text path inside this svg all you need to do is apply color to the parent element or this element itself.

    For example if you want this text inside logo to be red you can use:

    <div style="color:red">
<svg class="icon icon-logo"><use xlink:href="/path-to-the-file/#icon-logo"></use></svg>
</div>

    If you need extra help let me know, i can provide codepen if you're stuck.

    Cheers, Miran

    0
  • KapteynUniverse•2,900
    @KapteynUniverseSubmitted 7 days ago
    What specific areas of your project would you like help with?

    Any feedback is appreciated. Is there a way to change only the text color of the logo SVG, or is the dark mode logo missing? Also, is there a better way to fetch data, toggle states, and handle dark mode?

    Browser Extensions Manager UI

    #accessibility#react#tailwind-css#typescript#vite
    5
    P
    Miran Legin•740
    @miranleginPosted 7 days ago

    Hi @KapteynUniverse,

    if you want to preserve color of the icon while being able to change the color of the text alone you could import the svg file into Icomoon and export it as SVG sprite. This will download .zip file with all the files needed for this to work.

    You will need two files, symbol-defs.svg and style.css and you will need both.

    Inside symbol-defs.svg file structure will be similar to this

    ...
<defs>
<symbol id="icon-logo" viewBox="0 0 279 64">
<path fill="#c7231a" style="fill: var(--color1, #c7231a)" d="M21.409...

    In your case you will end up with multiple <path> nodes and next you need to identify which one is this text node, it will probably be this one

    <path fill="#091540" style="fill: var(--color2, #091540)" d="M84.789 45.268v-

    You can remove "fill" and "style" attributes which will allow you to change it's color via external css stylesheet.

    Next in HTML file you can reference this <symbol> with this line

    <svg class="icon icon-logo"><use xlink:href="/path-to-this-file-in-filesystem/#icon-logo"></use></svg>

    Don't forget to apply provided stylesheet style.css which you previously downloaded.

    In order to be able to change the color of the text path inside this svg all you need to do is apply color to the parent element or this element itself.

    For example if you want this text inside logo to be red you can use:

    <div style="color:red">
<svg class="icon icon-logo"><use xlink:href="/path-to-the-file/#icon-logo"></use></svg>
</div>

    If you need extra help let me know, i can provide codepen if you're stuck.

    Cheers, Miran

    Marked as helpful
    0
  • P
    krru09•150
    @krru09Submitted 15 days ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of almost everything! This is my first multi-functional project that I can see being out there in the real world. I think the two aspects of this project I am most proud of is accurately reflecting the cart with the popup modal at the end, and that I decided to go beyond the requirements of the assignment and create a sorting function where you can display the menu based on your preferences.

    What I would do differently for next time is simplify my code. While the code works, I know that there were probably more effective ways to write script. Also, I would probably implement testing frameworks to ensure that my code actually works with edge cases, ensuring my made works with high volume, orders, etc.

    What challenges did you encounter, and how did you overcome them?

    The biggest issue I had was thinking about how toggling between different settings actually duplicate event listeners can if you did not carefully consider how you display information. At first, I was simply changing the appearance of the add to cart vs. quantity button; however, that meant that whenever I was toggling to the quantity button multiple times, I would stack increment and decrement event listeners on top of each other, calling functions unnecessarily and causing a lot of bugs when using my website. For the buttons (and a lot of parts of my code actually), I utilized display: none depending on where the user was in their experience.

    What specific areas of your project would you like help with?

    I would like to explore more ways to create the pop-up modal at the end. I utilized the popover modal API but it seems like it may not be supported by older versions of some browsers (e.g., Firefox).

    Speaking of the popover modal, I had some issues with starting a new order. My original plan was to essentially erase the content from the popover modal after the user clicks Start New Order; however, the content in the modal would erase first and not close. The only way I got around it was utilizing a setTimeout() on the function that was responsible for clearing the modal, clearing the cart, and reloading the page. The timeout was so that the modal can close first and then begin a new order. This works, and I only needed to put 100ms for the setTimeout, which is basically indiscernible in practice... but I realize there was some flaw or inefficiencies in my JS for starting a new order. Any advice would be great!

    Responsive Product List with Cart (Pure Vanilla JS, HTML, SCSS/CSS)

    #sass/scss
    1
    P
    Miran Legin•740
    @miranleginPosted 11 days ago

    Hi @krru09,

    congratulations on completing this challenge.

    As i'm working on this challenge myself i took some liberty to look at other peoples solutions as well and i can say that this is the most polished and complete solutions that i stumbled upon. Regarding UX everything works like expected, there are no jumps between switching from regular button to increment/decrement, outline on image doesn't change layout etc so everything is nice and smooth. It seems that you thought about this kind of things because i have seen far too many examples of other developers not paying attention to this kind of stuff.

    If i'm cheery picking which i am i would advise to create a little bit more space for the interactive buttons for increment/decrement/delete because it's size currently is 20x20px which is far too small for comfortable clicking. I would include some spacing around but leave them visually small like they are now.

    You can do that quite easily by including another element between <button> and <img> for example

    <button class="quantity-icon-container increment-button">
    <div class="button-circle">
        <img src="assets/images/icon-increment-quantity.svg" 
        class="quantity-icon" alt="increment-icon">
    </div>
</button>

    and adding some extra padding on the button element. Keep in mind that proposed size for the interactive elements like buttons is at least 44px in size, for this square ones it means 44x44px so 24px of padding needs to be added or 12px on all sides.

    All in all great job on this challenge and happy coding!

    Cheers, Miran

    Marked as helpful
    0
  • P
    Kuvashnee Naidoo•450
    @KuvashneeNaidooSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I am glad that I used React as the useState hook helped to manage the state and rendering of the calculations, allowing for efficient updates to the UI. I will perhaps explore using other React hooks such as useRef to directly access DOM elements.

    What challenges did you encounter, and how did you overcome them?

    One of the most challenging parts of creating this calculator was ensuring that all elements were styled correctly and responsive to different screen sizes. I made the calculator responsive through a combination of Flexbox for centering, a maximum container width, CSS Grid for button layout and a media query to add a breakpoint in order to adjust a column.

    Responsive tip calculator built using React

    #react#bootstrap
    2
    P
    Miran Legin•740
    @miranleginPosted 11 days ago

    Hi @KuvashneeNaidoo,

    First of all, congratulations on completing this challenge!

    There are still a couple of things that could be improved, so let's get started.

    The use of h[x] tags seems arbitrary, and I personally don't think anything other than <h1> fits this project. For instance, <h1>Splitter App</h1> or something similar would work well here. Other than that, no other h[x] tags are appropriate.

    Speaking of tags, you could use <label> elements linked with <input> instead of using <h6>. That would help with accessibility and also would create a link between labels and inputs.

    Applying border only of :focus makes input elements change it's size and the whole lest side area jumps because 4px is added on focus to the input element.

    .input input:focus {
    border: 2px solid #26c0ab;
    outline: none;
}

    To prevent this from happening you could apply border to default input styling but leave it transparent like so

    .input input {
    border: 2px solid transparent;
    outline: none;
}

    and only change color when in focused state, like

    .input input:focus { border-color: #26c0ab; }

    That would always create border but only change it's color when in focused state, preventing content jumps.

    You could also put some event listeners on "Bill" and "Number of people" as well because as much as you cannot calculate "Tip amount" you can definitely calculate "Total amount" without any Tip percentage selected. Meaning that you don't need to select tip to calculate Total/person amount.

    Last but not least you can use <input type="radio" name="tip" /> for all the Tip buttons instead of regular buttons which is more suitable for this kind of functionality. There is no need to keep track of which button is triggered because input with type="radio" can only have single element active at a time. The rule is they need to share the same "name" attribute for this functionality to work, for example

    <input type="radio" name="tip" id="5" />
<input type="radio" name="tip" id="10" />
<input type="radio" name="tip" id="15" />
<input type="radio" name="tip" id="25" />

    etc...

    Hope this helps.

    Happy coding! Miran

    0
  • Abiola Daniel•120
    @Africa4795Submitted 20 days ago
    What are you most proud of, and what would you do differently next time?

    I'm Proud of building a responsive Tip-Calculator

    What challenges did you encounter, and how did you overcome them?

    few challenges with positioning, and JavaScript

    What specific areas of your project would you like help with?

    Feedback is Welcome!

    tip-calculator-app-using JavaScript

    #accessibility
    2
    P
    Miran Legin•740
    @miranleginPosted 20 days ago

    Hi Daniel,

    first of all congratulations on completing this challenge. There are couple of gotchas in this project but nonetheless is a fun one for sure. Hope you had a great time developing this one.

    Now to the fun part, things that could be made to improve this solution.

    1. Semantics/Accessibility
    • correct usage of heading tags (h1-h6) should not be dictated by visual appearance, how large or small something is, rather which purpose they serve, for example; <h2> for the "#tipAmount", and "#totalAmount" don't make much sense, think of it like a Table of Content where every heading level represents section that is following it, in that way <h1> could be <h1>Splitter calculator</h1>, all the other <h[x]> tags are probably not needed here
    • input fields are missing labels, instead you are using <h3> for visual purposes, it is best practise to link <input> element to <label> elements and you can do that quite easily, for a <label> to be connected to <input> you need to add "for" attribute on the <label for="bill"> which should be the same as "id" on a <input id="bill">
    • you are using <input type="search"> but the better approach would be to use type which is more suitable for numeric inputs such as <input type="number"> or <input type="tel">, there are some obvious gains for using correct type like input validation, setting up different patterns which are accepted and so on, also mobile keyboard is quite different for each type

    input type="tel" on MDN

    input type="number" on MDN

    • for the "Tip" buttons you could use <input type="radio"> which is probably more suitable here, because only one single radio button can be activated at the same time, reducing complexity on the javascript part
    <input type="radio" name="tip" value="5" />
<input type="radio" name="tip" value="10" />
<input type="radio" name="tip" value="15" />

    input type="radio" on MDN

    1. Presentation
    • there is nothing obviously wrong with it rather the whole layout is quite small, it seems to me that the whole site is zoomed out a bit but this can be fixed with browser zoom or some other way
    • when you enter really large number the layout breaks meaning there is no wrapping enabled on the results side, and basically everything breaks out of the container
    1. User experience
    • input fields that can accept user input with keyboard will accept anything that user types, for instance nothing is stopping me for entering negative number, letters, or any other combination (some things could be prevented using correct input type)
    • calculation is only happening on "Tip" button clicks which can be problematic if you change something in other fields, previous commenter mention adding event listeners to inputs as well
    • "Reset" button looks like it's always in disabled state, nothing changes when the calculation is actually run

    Hope you will find these feedback usefull!

    Best Regards, Miran

    Marked as helpful
    0
  • P
    Miran Legin•740
    @miranleginPosted about 1 year ago

    Hi @Madhavan,

    I would remove grid completely from the mobile view, if you disable it yourself in the Dev Tools you will see that it's not doing anything useful.

    Better solution would be to include it in the media query on the resolution you actually need it, in that way you don't need to override anything.

    Also I would like to +1 the previous posters response about width/min-width/max-width. In general it is advisable to not use width/height on elements because that can lead to overflow issues etc...

    Happy coding!

    Cheers, Miran

    1
  • P
    Miran Legin•740
    @miranleginPosted over 1 year ago

    Hi momorocks,

    regarding breakpoints sizes i believe they are only recommendations how the page should look like on a given browser width, which doesn't mean if the 375px is the mobile screenshot that everything from 375px higher should be desktop or tablet view. It is up to the developer to judge where is the sweet spot to translate the design from mobile to tablet/desktop and vice versa. Usually when things start to fall apart quite drastically it's time to think of placing appropriate breakpoints in the code.

    For instance I've put breakpoint at the 640px browser width because i found that this is the sweet spot for everything to look good. Keep in mind that there are probably far less devices that have resolutions in a range from 500-600px so not every device width is equally important in that matter. You should focus more on device breakpoint ranges. Here is the quick google for that matter:

    Mobile devices – 320px — 480px. iPads, Tablets – 481px — 768px. Small screens, laptops – 769px — 1024px. Desktops, large screens – 1025px — 1200px. Extra large screens, TV – 1201px, and more.

    Keep coding, Miran

    0
  • P
    Miran Legin•740
    @miranleginPosted over 2 years ago

    Hi Kira,

    congratulations on completing this challenge!

    Getting faster and more confident is a nice feeling isn't it?

    Now let's get back to feedback. I won't go into semantics because previous poster reviewed that part. The part i'm most interested is the CSS and i think there are some improvements to be made there.

    1. line 44 of style.css has some invalid properties which can be inspected in Dev Tools, this is on .columns declaration.
    2. you have used border-radius on a single .col elements and make your job more difficult and styles harder to mantain, you can instead put all rounded corners on parent div .columns because no matter what the direction on the cards is they will always have all four corners rounded, also you need to apply overflow:hidden on a parent to stop children's background to spread outside of the corners
    3. most of the spacing here on the platform is based on a 16px value which is 1rem by browsers default, you can apply that logic when dealing with margin/padding spacing stuff, if it's 24 it is 1.5rem/em, 32 is 2rem/em etc. I found the best way to use rem's for applying layout stuff and spacing around text is easier with em because it is calculated based on font size of an element. For example: h1 has a font-size of 24px, and margin bottom of 12px, if your h1 grows on the larger viewport you need to manually enlarge the bottom margin. if you use 1.5rem as a base font size, and put 0.5em as a margin top, when you enlarge you font-size margin will always be 50% of that font size because em is relative to the element's font-size.
    4. i've noticed that you declared your custom properties with this naming convention:
      --lexend-deca: 'Lexend Deca', 'sans-serif';
  --big-shoulders-display: 'Big Shoulders Display', 'sans-serif';

    this is somehow limited because if font is about to be changed you would also need to change the name to because it doesn't make any sense to have custom property --lexend-deca which points to open sans font for instance. that way you are playing cat and mouse because now you have to replace all the instances of this font throughout the whole stylesheet and you made yourself a recipe for disaster. Better way would be to name it like a --font-base with --font-heading for example. 5. also i would suggest to take a look at some of the modern CSS resets to just have a clean start each time, you can adjust it to your needs later if you need to or add couple of things if you find necessary

    Andy Bell reset

    Josh Comeau reset

    Both of them did a great job with explaining all the individual rules they created so check them out!

    Keep coding and see you on another challenge!

    Cheers, Miran

    Marked as helpful
    1
  • P
    Miran Legin•740
    @miranleginPosted over 2 years ago

    Hi Mohit,

    congratulations on completing this challenge!

    As I've just submitted my take on this one earlier today I have something to compare on to. I think your solutions looks and behaves quite nice. I really like subtle hover effect on Services cards and i would recommend using this kind of effect on loading animations too. My personal feeling is that they are way too much for greeting you when you load the page every time and I would suggest toning it down a bit. Maybe some staggering loading animation on cards would be better idea. Maybe something like this

    I noticed that you have the same issue with vertical alignment of the text in the buttons like i had and the solution to that is quite simple:

    .btn::after {
    content: '';
    display: inline-block;
    height: 1.75em;
    vertical-align: middle;
}

    The problem and the solution are explained on this link

    Keep coding!

    Cheers, Miran

    Marked as helpful
    0
  • P
    Miran Legin•740
    @miranleginPosted over 2 years ago

    Hi Cheosphere,

    congratulations on completing this challenge!

    I'm impressed how you did this challenge because in my view there are probably 20% or more code which is definitely not needed here and i think you made yourself life much harder with this one. There are lots of hard-coded values especially on the height of elements and with things like that life can be so much harder when you need to maintain all that stuff.

    What probably bothers me the most is the sizing of the actual buttons for the slider. They are really hard to click because they are to small, you can read some info on setting size on buttons.

    Other that that it would be better to use button element instead of a a tag here also because a have different purpose. It is used primarily for links.

    Also when i click on the slider buttons there is an instant scrollbar to the right side which is causing content to jump from right to left and back an is easily avoidable with probably smaller value for scale.

    Blockquote tag and an H2 could be switched with flex-direction: column is you wanted to switch their places without using negative order on the blockquote itself. Also i'm not an expert it semantics but i don't think that blockquote is used properly here.

    Key takeaway from this is to try and make yourself life easier without fighting the layout so much. You've used all the techniques for positioning so you already have some knowledge but using it rightly takes some time and practice.

    Keep coding!

    Cheers, Miran

    Marked as helpful
    2
  • P
    Miran Legin•740
    @miranleginPosted over 2 years ago

    Hi Dave, congratulations on completing this challenge!

    I'm no expert in React by any means, even struggle in Javascript a bit so can't comment on that part. So I will comment on some things that I can see and think they can slightly improve user experience.

    I knew when i saw the notification that you completed another challenge that i won't be disappointed and you prove me right again. I think you did an awesome job on this one. Everything is working like expected, there were no hiccups or anything strange to happen. I tried it on a 27" Desktop and a 6" Smartphone. Restarting browser to continue where you left of is working like expected.

    So let's get started with some of the minor improvements in my opinion:

    1. when you are playing with the mouse i would love the see the cursor:pointer on the buttons. It is such a minor thing but in my opinion it is definitely needed here
    2. on the intro screen where you are choosing your opponent i would love to see marginally taller buttons (CPU vs PLAYER), it is slightly awkward to hit it on the smartphone device
    3. when your opponent is CPU just some delay to give impression that CPU is calculating his next move, to be more immersed in the experience of a game

    Looking forward to see you next challenges!

    Cheers, Miran

    Marked as helpful
    1
  • P
    Miran Legin•740
    @miranleginPosted over 2 years ago

    Hi Greg,

    first of all congratulations on completing this challenge!

    Using it for a couple of minutes i encountered some problems along the way and i will document it here.

    Starting from top to bottom:

    1. it is possible to enter non-numerical characters into inputs
    2. when i enter first character in the "bill" field there is a validation message in the "number of people" field, not necessary in my opinion
    3. if you enter something in the "bill" and "people" fields there should be a calculation for "total / per person"
    4. if you select "10%" from the predefined values and enter any number in "custom" field 10% is left as active
    5. when all 3 steps are populated ("bill" = 100, "tip" = 10%, "number" = 1) and you want to change the number of people, only "tip amount" is changed and not "total"
    6. if i enter 2 persons, and 200$ next nothing is happening, no calculation is done

    Cheers, Miran

    Marked as helpful
    0
  • shan1y•190
    @shan1ySubmitted over 2 years ago

    BestFlix

    #react#typescript#mysql
    1
    P
    Miran Legin•740
    @miranleginPosted over 2 years ago

    Hi shan1y,

    i would like to take a look at your project as it looks quite interesting but am stuck at the login page, did you add some dummy accounts for demo purposes or i need to create account for this? I tried looking at the github repo Readme file but couldn't find anything.

    Thanks, Miran

    0
  • P
    Miran Legin•740
    @miranleginPosted over 2 years ago

    Hi Kostya,

    congratulations on finishing this challenge.

    Regarding footer image you could do couple of things depending which route you want to go. Analysing the design you can calculate how much of vertical space this footer image takes and plan accordingly with markup and CSS.

    For example, if i remember correctly footer takes 25% of viewport height so you could create a grid or flex container with 2 rows and set top row for 75% and bottom for 25% of vh. That way you will always get perfectly sizes footer space. Next you could center the icons with display: grid; place-content:center; on the footer itself. Next step is to scale the background image. You could do something like this.

    background-image: url(pattern-hills.svg);
background-repeat: no-repeat;
background-position: 50% 0%;
background-size: cover;

    This way you are telling the image to not repeat itself, that to be positions always in the center on X-axis, and on top on the Y-axis, and last to stretch and cover all the available space.

    So final footer styling would look something like this:

    footer {
    background-image: url(pattern-hills.svg);
    background-repeat: no-repeat;
    background-position: 50% 0%;
    background-size: cover;
    display: grid;
    place-content: center;
}

    One more thing i've noticed is that when the numbers are changing you are getting minor shifts in the layout. You can fix it by adjusting the width tiny bit just to make sure that wider characters can fit in the design. Best way would be in my opinion to set width: 3ch; which is character width unit. If you are interested you can find more info about it here

    Keep coding! Cheers, Miran

    1
  • P
    Miran Legin•740
    @miranleginPosted over 2 years ago

    Hi Felipe,

    congratulations on completing this challenge!

    I suppose you are talking about positioning button element and if you are the solutions is pretty simple actually. All you need to do is get rid of height declaration on .advice-card container, that way you are making height more fluid and based on length of the text. Now your button is nicely positioned on a bottom edge of the container and all you need to do is push it (transform) somehow to the bottom even more. You can do that by transforming it on a Y-axis with: transform: translateY(50%);. That should fix the problem you are having.

    Keep coding!

    Cheers, Miran

    Marked as helpful
    0
  • P
    Miran Legin•740
    @miranleginPosted over 2 years ago

    Hi Mok,

    first of all congratulations on completing this challenge!

    I think your solution looks great, i really like the slider feel of the page when you move between planets. You did a great job with this project.

    Like always there are things that can be improved so let's get started.

    Desktop:

    1. on screens larger than 24" there is a lot of white-space bellow the content, i think that can be improved with some calculations regarding available height etc.. to create more balanced look
    2. also on Venus page, third tab "Surface Geology" has somewhat longer text and shifts the whole page up and down when you toggle between other tabs on this page; same experience can be seen on other pages aswell
    3. below 1200px of resolution when the navigation wraps below the logo after the transition ends page shifts from the top for around 20px or so, it seems like when animation is active whole thing is shifted up and when it finished it goes back down for some reason

    Mobile:

    1.mobile navigation when active is placed near the top of the page, needs some shifting down because right now if covering the logo area a bit,

    .el-dialog__wrapper {
    ...
    height: calc(92vh + 4px);
    ...
}

    needs to be

    .el-dialog__wrapper {
    ...
    height: calc(92vh - 27px);
    ...
}

    at least on my machine.

    Other than that like i said earlier it is great attempt and nothing major to add here.

    Cheers, Miran

    Marked as helpful
    1
  • P
    Miran Legin•740
    @miranleginPosted over 2 years ago

    Hi Bachar,

    first of all congratulations on completing this challenge!

    At first everything seems to be working fine but if you scratch the surface a bit you will find some things that can be improved. Let's get started!

    1. when you click the + sign multiple times you will notice that the button is slightly changing position left/right. this is because every number has different width so the whole thing is slightly shifting from left to right. let's assume that nobody is going to put more than 99 sneakers in the basket to our safe bet is to limit the width of the number container to 2 characters. in css that would be 2ch. more info on ch units also as this is not monospaced font more info on monospaced fonts we can be safe and put 2.25ch and also align that number to the right hand side with text-align: right
    2. another example with shopping cart, if you add more than 1 item when you want to remove article from the card you need to remove it 1 by 1, i'm not so sure about this practice and i would suggest to remove all of the from the cart unless otherwise is stated in the challenge brief
    3. when you open the modalbox with images you will see that icons are not aligned properly in the circle, that is only 1 part of the problem, another is that better practice would be to create button elements that you can style with background-images and attach click event listeners on button itself, also remove onclick attribute from markup itself
    4. menu-icon also has inline eventlistener so you can follow same advice as for buttons in a modalbox
    5. on mobile view when you open the menu if you inspect it in the devtools you can see that categories div is much wider than the body itself. that is because you are working in content-box model which calculates your width: 100% and adds padding: 1.5em 1.5em so you end up with 100% + 3em which is wider than 100% obviously. to fix that you can add
    /* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

    to revert to border-box model which is much easier to work with more info on box-sizing

    Keep coding!

    Cheers, Miran

    Marked as helpful
    2
  • P
    Miran Legin•740
    @miranleginPosted over 2 years ago

    Hi Matias,

    first of all congratulations on completing your first project!

    As you progress through the challenges you will notice that all projects have breakpoints set in style guide as this is sort of boilerplate common for all the challenges here. That being said that doesn't mean you must follow them strictly in your attempts to create breakpoints in your CSS. They serve as a guideline to how design should work and look like at certain breakpoints. It is your responsibility to choose correct breakpoints regarding content that is provided in challenge itself.

    Hope that makes it somewhat clearer.

    Keep coding! Cheers

    Marked as helpful
    1