Skip to content
Submitted 10 months ago

Recipe page, not using flex or grid. Responsiveness?

Ynotlocin1•80
@Ynotlocin1
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi Developers,

I hope this message finds you well. I'm a currently a newbie, started to learn HTML & CSS 2 weeks ago. I have a few questions about this project :

How do I Change the Color of the dots and numbers of <ul> and <ol> elements? Could you provide insights or best practices on how to alter the color of these list elements effectively?

I think there is an issue with the responsiveness of my website, and I'm wondering if the use of margins might be contributing to the problem. Should I reconsider using margins in favor of a different approach for better responsiveness? Any guidance on responsive design practices would be greatly appreciated.

Can you point out other things that went wrong in this project?

Additionally, I am eager to learn and improve my skills as much as possible. I aspire to minimize errors in coding techniques and structure. If you could provide any advice or share your experiences on learning the ropes effectively, I would be extremely grateful.

Community feedback

  • solvman•1,650
    @solvmanPosted 10 months ago

    Hi @Ynotlocin1 👋

    Very well done 🤩 Congratulations 🎉

    Great job using <section>👍. Remember to use landmark elements to structure your HTML document. Landmarks are sections of a page that can be identified by assistive technologies, allowing users to understand the page's structure and navigate it more easily. They are typically defined using certain HTML5 sectioning elements or ARIA roles. The <article> element represents a complete and self-contained piece of reusable content, such as a newspaper article, forum post, blog post, or recipe. 👌You may use the <article> element to wrap the card. Consider wrapping everything with the <main> element.

    Remember, heading levels represent levels of heading subsections, not typographical decoration. It would be best if you did not skip sections; <h1> should be followed by <h2> and so on. I suggest you replace <h3> and <h4> with an <h2> element for each section, which is the most appropriate for a section heading. For example:

    <body>
    <main>
        <article class="main-container">
            <img .../>
            <h1>Simple Omelette Recipe<h1>
            <p>...</p>
            <section>
                <h2>Ingredients</h2>
               ...
            </section>
            <section>
                <h2>Instructions</h2>
                ...
            </section>
            <section>
                <h2>Nutrition</h2>
                ...
            </section>
        </article>
    </main>
</body>

    You may read more about it in:

    Another point I'd like to mention is the unit sizing for padding, margin, and font. Try to use REM units for font size, padding, and margin. If body font size is not mentioned, the safe unit is 1rem.

    I'm afraid your design is not responsive at all. Please don't hard set the width of containers; instead, use min/max height and let it flow. Remember, HTML documents are pretty responsive by default; we do not need to stay in the way of it by hard-coding widths. You are correct; very strange clipping and squeezing are caused by your hard-set margins. It would be much better if you just set the maximum width for the container and use inline margins to center it. For example:

    .all-container {
    background-color: rgb(255, 255, 255);
    max-width: 600px; 
    margin: 5rem auto; /* 5rem on top and bottom, auto left and right to center */
    padding: 2rem;
    border-radius: 1.25rem;
}

    I highly recommend checking out the newly published article "A practical guide to responsive web design" and redoing your project.

    Those "dots" for <li> element are called "markers," and you can access and change its properties by addressing it through ::marker pseudo element. You can change font style and color for both "dots" and numbers like so:

    li::marker {
  color: var(--color-primary-600);
  font-weight: var(--font-weight-bold);
}

    In the example above, I utilized the use of global variables. I recommend you take a look at those as well: CSS Variables

    Otherwise, very well done! 🚀 Impressive! 🎉 Keep it up! 👍 I hope you find my comments useful 🫶

    Marked as helpful
    1
    Ynotlocin1•80
    @Ynotlocin1Posted 10 months ago

    @solvman

    Thank you for your feedback; I didn't expect to receive such a quick and detailed response. It's very motivating! Your advices are valuable and will help me a lot. It makes me want to take on all the challenges on this site! :)

    One last small question: were the media queries executed correctly? I noticed that when the page width was below 375px, the recipe image retained a slight padding. I'm not sure how to remove it while keeping the padding for the rest of the article. Do you have any simple solutions? Thanks in advance!

    0
    solvman•1,650
    @solvmanPosted 10 months ago

    @Ynotlocin1

    Yes, your media query executes as it should, but the recipe keeps on trying to scale down. You need to set min-width to stop the shrinking. I'd suggest setting min-width: 375px and moving up your breakpoint to 600px. Your approach is more complicated than it should be. Please remember that HTML is pretty responsive without a single line of CSS. Block-level elements stack on top of each other and automatically stretch out, and so on. The majority of such arrangements would already look good on mobile. That is why I like the Mobile Layout First approach. There are plenty of resources out there, to name a few:

    Take some time to understand these concepts, and when they click, redo the project with a Mobile Layout First mindset.

    Please consider marking my comment helpful if it is of any benefit to you 🫶

    Marked as helpful
    1
    Ynotlocin1•80
    @Ynotlocin1Posted 10 months ago

    @solvman

    Great advices! I'll read through everything and redo the entire site later! :) Thank you very much!

    0
    Ynotlocin1•80
    @Ynotlocin1Posted 10 months ago

    @solvman

    Hello, I have recreated the page from scratch, starting with the mobile format. However, I've encountered a few issues:

    I managed to change the line-height between the points in "preparation time," but in the "total" section, there's the same line-height, and I don't want it to be there.

    There's a gap between the image and the h1, and I can't seem to resolve it. I noticed some sort of padding at the top and bottom of the text, but I didn't add any to the h1... Edit: I added margin: 0 to the h1, and it worked. Do you have an explanation for this?

    The image is causing some trouble. In the mobile format, there's no padding on the image, but there's a slight one on the rest of the site. When the image is in desktop format, this padding is consistent everywhere, for both the image and the rest. How can I address this?

    I kept the border at the top of the image in both desktop and mobile formats. I'm not sure if that was the right thing to do.

    Thanks ! :)

    0
    solvman•1,650
    @solvmanPosted 10 months ago

    @Ynotlocin1

    ⭐️ Gap issue. By default, every HTML element has some styling, and so does <h1>, for example, default styles for <h1>:

    display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;

    For the complete list of default styles, check CSS Default Values Reference

    There is your margin. That's why it is wildly used practice to have some CSS Reset before you start styling. I use Josh Comeau CSS Reset. I use whatever part is needed, trying not to pollute my file with unused CSS. At a minimum, you could do the following:

    *, *::before, *::after {
    margin: 0;
    box-sizing: border-box;
}

img {
    display: block;
    max-width: 100%;
}

    ⭐️ Image Padding Issue. Image padding comes from the .recipe-container class. It would be best if you looked into using some dev tools. For example, in Google Chrome, you can right-click the page and choose "Inspect," which will open Dev Tools, where you can inspect each element and see where the margin/padding is coming from.

    To address this padding issue, wrap all sections in a <div> and give it some padding without affecting the image. For example, your structure could look something like this (as a side note, you do not need the container word in the class name; you could call it recipe. It is implicitly known that it is a container of some sort 🤓 ):

    <body>
    <main>
        <article class="recipe">
            <img class="recipe__img".../>
            <div class="recipe__content">
                <h1>Simple Omelette Recipe<h1>
                <p>...</p>
                <section>
                    <h2>Ingredients</h2>
                   ...
                </section>
            ....
            </div>
        </article>
    </main>
</body>

    You first start with no padding or margin on the .recipe. Let the image take 100% of the width. It will do it because of the reset above. You only add padding to .recipe__content. When break-point hits, you remove the padding from the .recipe__content and add padding, border, and margin to .recipe. Something like that:

    .recipe {
    min-width: 375px;
    padding: 0;
}

.recipe__content {
    padding: 1.5rem;
}

@media (min-width: 650px) {
    .recipe {
        max-width: 735px;
        margin: 7rem auto;  /* centers recipe horizontally */
        border-radius: 1.5rem;
        padding: 2.5rem;
    }
    
   .recipe__img {
        border-radius: 0.75rem;
    }
   
   .recipe__content {
       padding: 2.5rem 0 0; /* 2.5rem on top only below image */
    }
}

    You would learn a ton if you could go and look at how other people did the same project. It will make your research into things that you need help understanding. That is invaluable! Here is the link to my solution if you are interested: Recipe Page Main

    Please consider marking my comment helpful if it is of any benefit to you 🫶

    Marked as helpful
    0
    Ynotlocin1•80
    @Ynotlocin1Posted 10 months ago

    @solvman

    Thank you very much! I truly appreciate your assistance; it's invaluable for someone like me who is just starting out. It helps me avoid getting stuck in my mistakes :) I'll go through all your comments and start a second exercise! :D

    1

Please log in to post a comment

Log in with GitHub

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