Skip to content
OverviewSolutions
8
Comments
35
John Carruthers
@techyjc

All comments

  • John Carruthers•310
    @techyjcPosted 10 months ago

    Updated the design with the suggested changes.

    0
  • John Carruthers•310
    @techyjcPosted 10 months ago

    Great work! You might want to change the breakpoint as the carousel gets a little small when you resize the browser.

    1
  • John Carruthers•310
    @techyjcSubmitted 10 months ago

    So, I decided to published this unfinished. As I've been working on multiple personal projects and a second Frontend Mentor project, while also going to work...🙄

    There is not a huge amount left to do..

    1. Burger Menu - Event handler functions and Styling CSS. (Completed) 31/1/2024
    2. Carousel (Desktop) Model view. (Completed) 30/1/2024
    3. Remove Carousel Navigation buttons (Desktop). (Completed) 31/1/2024
    4. Address spacing and text formatting issues.
    5. Simplify JS code - bit overly complicated and repetitive.
    6. User Profile image size on Desktop view. (Completed) 30/1/2024
    7. Basket text centered and no checkout button when empty.

    Well.. maybe a bit less than huge... 🤣

    Thought it would be interesting to publish it unfinished, obviously with a plan to complete it. It has a working Cart. You can add and remove items.

    Any and all comments welcome.

    Ecommerce Product Page using Grid

    2
    John Carruthers•310
    @techyjcPosted 10 months ago

    Updated the carousel and additional code, plus Avatar size at desktop break point.

    1
  • Daniel 🛸•44,310
    @danielmrz-devSubmitted 10 months ago

    Hello! I'm Daniel and this is my solution for this challenge! 😊

    Definetely not my best work... I underestimated this challenge and have paid the price... 😅

    I couldn't quite get the menu correctly on mobile version and faced many different problems with the layout on desktop version too. I had to use fixed values on the container grid because I just couldn't do it other way.

    I decided to post the solution anyway because I can't do more than that with my current knowledge. I intend to redo this challenge in the future. For now, that's what I've got.

    If you have any suggestions on how I can improve this project, feel free to leave me a comment!

    Feedback welcome 😊

    News Homepage built with SASS

    2
    John Carruthers•310
    @techyjcPosted 10 months ago

    Hi Daniel,

    Great work! I did this challenge. The responsive aspect caused me a few problems, it can mean adding in multiple break points because the areas in the design like the 'new' section start looking a bit odd at various screen sizes. Like that you went your own way with the menu hover. I managed to re-create the menu hover underline using pseudo elements (::before) and/or (::After) but it took a little bit of experimentation.

    I initially looked at your CSS and thought if you had used the classes to address the descendant elements directly to reduce specificity but then realised that you were using SASS and were most likely nesting the your CSS selectors.

    Again, great work!.

    2
  • John Carruthers•310
    @techyjcPosted 11 months ago

    Hi Kiran, Great job! Fair bit of CSS for that one.

    1
  • John Carruthers•310
    @techyjcPosted 11 months ago

    Glad you got it fixed. You did a nice job. Is there any particular reason you styled some of the elements locally using the style attribute over using selectors in the style sheet?

    You could add line-height: 1.5; for the text to space the lines more. You could also use font-family and font-size to help match the design. You can get the recommended font from google fonts and copy and paste the link and the css entries from the site.

    Using the <br> element is ok for this but I would recommend avoiding the <br> tag when designing responsive layouts. It's better for the text to flow and break in relation to the container size.

    Hope this helps.

    0
  • John Carruthers•310
    @techyjcPosted 11 months ago

    @AhmedMohamedRefaay I think you put in the wrong link to your published Github page as the preview screenshot is incorrect.

    0
  • John Carruthers•310
    @techyjcPosted 11 months ago

    vh doesn’t take into account address bar in mobile browsers or non floating scroll bars. There is the dvh option dynamic viewport height sizing but it lacks full browser support. The video below covers sizing containers and then use flexbox Justify-content and aligh-items to center the Flexbox content.

    This YT video might help… (https://youtu.be/-sF5KsEo6gM?si=vpMXHedXC4cfjVP7)

    Marked as helpful
    1
  • Alysson Gomes•470
    @EONRaiderSubmitted 11 months ago

    This project required a lot of work due to the sheer number of design exceptions everywhere. It's not like all cards followed the same patterns -- there were changes that had to be dealt with between each card and, for the same card, for each of the breakpoint viewport dimensions.

    It's a good project overall if you need to practice your CSS Grid skills.

    Responsive HTML5/CSS3 Testimonials Grid Section

    2
    John Carruthers•310
    @techyjcPosted 11 months ago

    I found the same when I re-created the design. I’m considering redoing the design but creating utility classes for background colors and text colours etc. Then assign the classes as needed. Mainly to see if I can improve on my first attempt.

    1
  • Aleš Zima•420
    @EsosekSubmitted 11 months ago

    Hi, would like to get your opinion on font-sizes.

    1. I prefer using rem for font-size so it scales nice with users setting in the browser. Is it a good practice to scale fonts according to vw size and clamp it to rem?
    2. How can I easily apply a base text size? Will the code below scale every child font-size?
    body {
font-size: 0.8rem;
}

@media (min-width: 40rem) {
body {
font-size: 1rem;
}
}

.child {
font-size: 1rem;
}

    Thanks! Aleš

    Blog preview card using clamped font

    3
    John Carruthers•310
    @techyjcPosted 11 months ago

    Looks great by the way.

    0
  • Aleš Zima•420
    @EsosekSubmitted 11 months ago

    Hi, would like to get your opinion on font-sizes.

    1. I prefer using rem for font-size so it scales nice with users setting in the browser. Is it a good practice to scale fonts according to vw size and clamp it to rem?
    2. How can I easily apply a base text size? Will the code below scale every child font-size?
    body {
font-size: 0.8rem;
}

@media (min-width: 40rem) {
body {
font-size: 1rem;
}
}

.child {
font-size: 1rem;
}

    Thanks! Aleš

    Blog preview card using clamped font

    3
    John Carruthers•310
    @techyjcPosted 11 months ago

    Hi Aleš,

    The default base text size is 16px; so if you're using REM it is based on the Root element.

    You define your root in CSS

    :root { --ff-base-size: 16px; font-size: var(--ff-base-size); }

    Depending on what you are doing em might a better option as it uses the font-size defined in the parent element and scales from there.As you might require different base font-sizes depending on a specific nested set of elements.

    (I think that's right... I'm sure someone will correct me if I'm not...)

    Marked as helpful
    0
  • John Carruthers•310
    @techyjcPosted 11 months ago

    Hi Kiran,

    Hope you're well. Looks great!

    Marked as helpful
    1