Skip to content
OverviewSolutions
10
Comments
12
P

Tomislav Šuto

@RetroApe260 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

JavaScript

Latest solutions

View more solutions

Latest comments

  • P
    Tomislav Šuto•260
    @RetroApe

    Hi Alqorni.

    I see you've been doing a lot of challanges last two weeks. Nice work, keep it up.

    When checking your solution, I noticed that you are using 'width' with percentages a lot. Although it is not a mistake because it can be used if one wants to have certain kind of effect when resizing a window, it is almost never used. Why? - Because using width automatically makes your element unresponsive.

    I've done a lot of research and everyone is using max-width and min-hight when they want their element to have certain width and height; this will still leave some room for the element to resize when viewport width goes under max-width. As for units, rem is used for accessibility reasons.

    When resizing the window, the good thing is that the text is always visible, which is the most important thing. You did that nicely. There is an exception. When resizing height of the viewport; when height reaches below 640px, the text starts clipping. This is because height is set to 70%.

    I tried removing it, but then the element's height goes all the way from top to bottom. Then I saw that there is a previous height that's been set to 100%. Well, I removed all width and height percentages on .bigcontainer and instead put max-width: 950px under @media query and to me it seems to be better. This way, the card will also not stretch when increasing the width of the viewport.

    This is all done by looking at the Dev Tools on the browser. If you do not know about it, I recommend you check it out. It is not complcated and it can help you a lot when trying to find the issue with CSS. This video explains it nicely.

    Also, one good thing to have in mind is that HTML by its own is completely responsive. The moment you start writing CSS, you are either moving away from that responsiveness or you are keeping it responsive. There are videos about that as well (～￣▽￣)～

    I hope I have helped you in some way :)

    All the Best!

  • Toye Ayomide•90
    @Toye-dev
    What specific areas of your project would you like help with?

    I had a really really hard time getting the share feature of the minimized screen to revert back to its default state in the enlarged screen. No matter what trick I tried, I couldn't figure it out. I ended up duplicating the same features in my html for the media query features.

    I'm pretty sure that was wrong.

    Article preview component using html, css and js

    1
    P
    Tomislav Šuto•260
    @RetroApe

    Hi Toye.

    I am not sure what is the problem with the share feature, but you have a bigger problem on your hands. I have seen your preview-card doesn't have width or height set. It only acts as a flex container. So basically, image and text are just "glued" together..... Scratch that. Image is actually behind the text. Why did you do it this way?

    You already know how to do it the right way and you have done it in Blog Preview Card.

    It is the same thing, only difference is that the image should touch the edges of the card.

    The preview card should be 730 x 280 (px). Or in rem:

    max-width: 45.625rem;

    min-height: 17.5rem;

    Take off all margins/radius/height/width on text-section / img. Put background color and radius on the preview card.

    The img should have a certain width. Use max-inline-width or max-width. Also add object-fit and object-position.

    The text-section should have a padding.

    From this base you build further. Remember that your starting point is always a fully responsive HTML file. We ruin this responsiveness with CSS. Whenever something doesn't behave properly, it is time to check why and change or possibly delete the property that is causing the issue. If you try to solve these issues by adding more CSS..... well, no one can solve them this way.

    Try to learn a bit about the Dev Tools on the browser, they will help you understand the layout much better.

    Please be free to check my solution and if you have any questions I will be happy to help if I can. ChatGPT may also help with giving a proper resource instead of endlessly searching for an answer.

    I hope I was able to help a little bit.

    Best of Luck!

    Marked as helpful
  • P
    Tomislav Šuto•260
    @RetroApe

    Hi Lai Yiu Leung.

    I checked you solution. The layout is pretty close; certain parts could use bigger paddings/margins. Some colors are off; footer and purple buttons.

    Besides that, I don't see anything else.

    I checked different resolutions and true enough, the site is responsive.

    I think you did a very good job :) Best of Luck!

  • P
    Tomislav Šuto•260
    @RetroApe

    I am glad my feedback helped you.

    Usually, you never set height, at all. If you set a height on an element, it will most often make it unresponsive.

    You never set width on a <header>, <body>, or <footer>. It makes your site immediatelly unresponsive.

    I personally use Dev Tools on Chrome to check how my site functions, but people say Firefox is better.

    For Chrome:

    To open dev tools, just go to you site (or any other) and press shortcut: Ctrl + Shift + C. Use the same shortcut to hover over an element on your website and preview its width, height, padding, margins, or click it and you can check it's properties on the right.

    You can turn off properties or change values to see how your site behaves. You can also change width and height of the viewport to see how your site behaves.

    Try selecting <main> element end turn off height and width and see what happens.

    ...

    I mean, it is hard to explain these things with just words. Here, watch this video to learn how Dev Tools function. The video helped me, and it is not long like some other videos.

  • jahwts•20
    @jahwts
    What are you most proud of, and what would you do differently next time?

    I have just started out my journey with HTML, CSS and JS and this is my first landing page made with a great help of tutorials by Zach Gollwitzer.

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

    It is quite difficult to wrap my mind around how to organize all the stuff that is needed to create a layout and styling. From time to time CSS has driven me absolutely crazy. Staying patient is the key for now :)

    Responsive landing page using Flexbox

    1
    P
    Tomislav Šuto•260
    @RetroApe

    Hi jahwts

    I see that this solution was posted three months ago and nothing since. I do agree with your statement to stay patient; without it one cannot grow, but don't you think staying patient this much is going overboard ;)

    Anyway, you shouldn't have started with this challenge, but something simpler, something in the Newbie section, otherwise you will find yourself more frustrated than satisfied with your solution. Take little bites of the information and chew slowly, do not swallow without chewing. I know, I am full of wisdom...

    If you read this then I can only wish you...

    Best of Luck!

  • P
    Tomislav Šuto•260
    @RetroApe

    Hi Valchiz.

    I see you did a good job matching the layout. I also noticed you used border-top to mark each card with its own color. I actually didn't think of that. I used linear-gradient for that:

    background: linear-gradient(
        var(--cyan) 2%, /*this is where you change color*/
        white 2%
    );

    Shadows could use some amplification. Something like

    box-shadow: 0px 10px 30px 0px hsla(180, 62%, 55%, 0.55);

    I would advise against setting height and width on the main element. It will automatically make your layout unresponsive. Otherwise:

    • container doesn't stay in the center of the screen when you scale the window down (because it is staying in the center of the main, which went off screen)
      • other elements also behave in similar way
    • you will essentially be making your life difficult because you will have to make more @media queries than is necessary

    When I removed width and height on main, your .p-words element started behaving strangely. I saw that you centered this element by putting 450px on the left and right side of the margin. Centering elements horizontally is usually done by entering auto on both sides of the margin.

    p-words element should have a maximum width. It will still make the element responsive if the width of the screen becomes smaller than it.

    max-width: 55ch;

    I used ch, which is a unit for characters. It essentially makes your paragraph have a line no bigger than 55 characters. I think this is pretty cool.

    min-width and max-width is generally better to use on most elements because it will keep your elements respond to size reduction/expansion.

    I hope I helped a little bit and didn't make my explanations confusing :)

    Best of Luck!

    Marked as helpful
View more comments