Skip to content
OverviewSolutions
9
Comments
4
Riccardo
@riccardofano

All comments

  • Riccardo•240
    @riccardofanoPosted over 2 years ago

    Hello Erwin, you can position the cards using CSS grid!

    On the desktop version you'll see there are 3 columns of equal size. Then there are what might appear to be 3 rows but in reality there are only 2, the cards on the side start at the first row but span 2, they are then centered. On the mobile version there's only one column so you can change the grid accordingly.

    I hope this was helpful, take a look at my solution if you need any pointers.

    Marked as helpful
    1
  • José Wendel•60
    @wendeltmSubmitted over 2 years ago

    My dificult was to put the cards separate and to find a way to put the colors on the top of div, i tried 2 codes until finally do the final code to share on the site.

    Card's section (Version Desktop)

    3
    Riccardo•240
    @riccardofanoPosted over 2 years ago

    Hey José, good job on this challenge already, but it would be a great way to learn how to use CSS grid!

    If you look at the design of the desktop version you'll see there are 3 columns of equal size.

    Then there are what might appear to be 3 rows as well but in reality there are only 2, the cards on the side start at the first row but span 2 and then are centered. On the mobile version there's only one column so you can change the grid accordingly.

    Hopefully this was helpful, take a look at my solution if you need any pointers.

    Marked as helpful
    0
  • MURRAY122•280
    @MURRAY122Submitted over 2 years ago
    • svg, I needed to darken the dropdown arrow and end up using 'fill'. It filled the icon completely instead of just the arrows line. Is there another approach that could achieve this? Is it also best to use svg tags within the HTML file itself or as 'background-image' in CSS?
    • Is it best practise to add media queries (CSS) after each class or handle all media queries at the end of a CSS file.
    • The nav I handled by using JS to swap out CSS classes (top nav to side nav). The HTML wasn't changed, its structure contained within one HTML element. Is it better to separate the side and top nav structures into their own html tags?
    • The picture HTML tag am still new to. Seems difficult contain the image size for responsiveness without stretching the image out or being too small.

    Any feedback on this or anything else would be great. Thanks for viewing

    Intro section with dropdown nav

    3
    Riccardo•240
    @riccardofanoPosted over 2 years ago

    Hello Murray, good job on the challenge!

    Regarding your question about svgs: I personally use <img src="picture.svg" /> whenever I don't need to modify their color but I want them to take up space in the document so I can position them as you would with any other element in the dom. background-image is used when I don't want it to occupy physical space, it just needs to be in the background.

    You can look at this blue Slack banner under the comments for reference, the first line is an img tag, while the dark blue logo in the bottom right corner is in a background-image. One takes up physical space, the other does not.

    An inline svg is for when you want to take up space and modify its properties with CSS, like your dropdown arrow. Depending on how the svg was made you'll want to modify either the fill or the stroke, you can look at the actual file to know for sure.

    <svg class="icon" width="10" height="6" xmlns="http://www.w3.org/2000/svg">
    <path stroke="#686868" stroke-width="1.5" fill="none" d="m1 1 4 4 4-4"></path>
</svg>

    As you can see the stroke is a color while the fill is none so in this case you'll want to modify the stroke.

    0
  • Melad•220
    @melad99Submitted over 2 years ago

    Just finished this challenge ... the JavaScript was the most difficult when I try to validate the email and show the error but finally, I did it also I will update the mobile responsive and enhance it soon.

    Base Apparel Page

    2
    Riccardo•240
    @riccardofanoPosted over 2 years ago

    Hello Melad, excellent job on getting the javascript working!

    I wanted to let you know there's an easier way to validate an email, in fact, the browser already does it for you. Instead of checking if inputText's value matches the regular expression you can just access inputText.validity.valid thanks to having set <input type="email">. It does the exact same thing but it's a lot less work for you!

    Having set input as type="email" also allows you to style css elements by accessing its :valid or :invalid state so if you want to add a red border if your input is invalid you could do

    .base-input:invalid {
    border: 1px solid red;
}

    You can take a look at my solution for more details. Hope this was helpful and have a wonderful day!

    Marked as helpful
    0