Example of responsive webpage

Question

I'm doing a Coursera assignment on an HTML-CSS course. The assignment is to do a simple responsive page, which can be found here.

I think I came up with a solution, but I ended up having around 100 lines for the stylesheet, so I suppose that there is some ways to achieve the desired layouts in a more intuitive and easy way. I want a little bit of feedback on what I can improve here.

* {
    font-family: "Comic Sans MS", cursive, sans-serif;
    box-sizing: border-box;
}

h1{
    text-align: center;
}


.sign_fs{
    position: relative;
    width: 50%;
    min-width: fit-content;
    padding: 5px 10px 5px 10px;
    border: 5px solid black;
    float: right;
    font-size: 20px;
    text-align: center;
    margin-top: -2px;
    margin-right: -2px;
}

#chicken {
    background-color: pink;
}

#beef {
    background-color: slateblue;
}

#sushi{
    background-color: skyblue;
}

@media (min-width: 992px) {
    .text_fs {
        font-size: 15px;
        clear: both;
        margin: 1%;
        padding: 1%;
    }

    .div_fs {
        background-color: grey;
        border: 2px solid black;
        width: 31.2%;
        margin: 1%;
        float: left;
    }

}

@media(max-width: 992px) and (min-width:768px) {
    .text_fs {
        font-size: 15px;
        clear: both;
        margin: 1%;
        padding: 1%;
    }

    .div_tablet_top {
        background-color: grey;
        border: 2px solid black;
        width: 48%;
        margin: 1%;
        float: left;
    }

    .div_tablet_bot {
        background-color: grey;
        border: 2px solid black;
        width: 98%;
        margin: 1%;
        float: left;
    }

    #sushi{
        width: 20%;
    }
}

@media (max-width: 768px) {
    section {
        margin: 10px;
        padding-top: 0px;
    }

    .div_mobile{
        background-color: grey;
        border: 2px solid black;
        margin: 1%;
        margin-top: 20px;
        padding: 10px;

    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Module 2 solution</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Our Menu</h1>
    <section>
        <div class="div_fs div_tablet_top div_mobile">
            <div class="sign_fs" id="chicken">Chicken</div>
            <div class="text_fs" >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>
        <div class="div_fs div_tablet_top div_mobile">
            <div class="sign_fs" id="beef">Beef</div>
            <div class="text_fs" >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>        
        <div class="div_fs div_tablet_bot div_mobile">
            <div class="sign_fs" id="sushi">Sushi</div>
            <div class="text_fs">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>
    </section>
</body>
</html>

(suggestion) try to use relative units, over absolute(like pixel) units, specially as responsiveness is a case. 1 pixel may be too big, or too SMALL, depending on device screen density. But usually an inch is an inch. Hope it helps. — user230399, Sep 15, 2020 at 20:03
@911992 I know your advice may seem brief but please add an answer instead of a comment. Refer to the section When shouldn't I comment? on Comment everywhere. — Sᴀᴍ Onᴇᴌᴀ, Sep 15, 2020 at 23:09
Comic Sans!! They will fail you instantly ;) designforhackers.com/blog/comic-sans-hate — konijn, Sep 18, 2020 at 11:03

Sᴀᴍ Onᴇᴌᴀ · Accepted Answer · 2020-09-18 10:53:36Z

Simplifying overall layout

While I haven't gone through the coursera videos I did look at the syllabus. I see that the next assignment does involve using Bootstrap framework. Since this assignment requires no frameworks to be used, one option to consider looking at is flexbox. It was designed to eliminate the need for floating elements. One important thing to consider is browser compatibility. From a cursory search I don't see any requirement about browser compatibility in the Module 2 Coding Assignment but it is something to consider in other projects.

Simplifying current rules

Here are some suggestions to simplify the current rules in the stylesheet, without introducing flex styles.

Simplifying padding

The ruleset for .sign_fs contains this padding rule:

 padding: 5px 10px 5px 10px;

This can be simplified to

padding: 5px 10px

because "When two values are specified, the first padding applies to the top and bottom, the second to the left and right."¹

redundant styles can be combined

Within @media(max-width: 992px) and (min-width:768px) { the rulesets for .div_tablet_top and .div_tablet_bot are nearly identical except for the width rules, so all other rules could be abstracted to a common ruleset:

.div_tablet_top,
.div_table_bottom {
    background-color: grey;
    border: 2px solid black;
    margin: 1%;
    float: left;
}

Excess class names

The class names div_fs and div_mobile are shared by all the <div> elements that are direct descendants of the <section> element. Because of this, those class names could be removed and the selectors could merely use a child combinator: section > div

konijn · Accepted Answer · 2020-09-18 19:24:11Z

From a short review, 2 items;

Comic Sans.. I would look for another font
Hardcoding your food items (beef, chicken, sushi) will not age well over time, since I cant see a link between the food and the color. I would suggest you just give a color to the first, second, and third item. For example the below will make the first sign pink;
```
  section>div:nth-child(1)>.sign_fs{
      background-color: pink;
  }
```

I am no CSS guru, so I had to play a while with it to make nth-child selector work;

* {
    font-family: "Comic Sans MS", cursive, sans-serif;
    box-sizing: border-box;
}

h1{
    text-align: center;
}


.sign_fs{
    position: relative;
    width: 50%;
    min-width: fit-content;
    padding: 5px 10px 5px 10px;
    border: 5px solid black;
    float: right;
    font-size: 20px;
    text-align: center;
    margin-top: -2px;
    margin-right: -2px;
}

/* pink, cornflowerblue,  skyblue*/

section>div:nth-child(1)>.sign_fs{
    background-color: pink;
}

section>div:nth-child(2)>.sign_fs{
    background-color: cornflowerblue;
}

section>div:nth-child(3)>.sign_fs{
    background-color: skyblue;
}


@media (min-width: 992px) {
    .text_fs {
        font-size: 15px;
        clear: both;
        margin: 1%;
        padding: 1%;
    }

    .div_fs {
        background-color: grey;
        border: 2px solid black;
        width: 31.2%;
        margin: 1%;
        float: left;
    }

}

@media(max-width: 992px) and (min-width:768px) {
    .text_fs {
        font-size: 15px;
        clear: both;
        margin: 1%;
        padding: 1%;
    }

    .div_tablet_top {
        background-color: grey;
        border: 2px solid black;
        width: 48%;
        margin: 1%;
        float: left;
    }

    .div_tablet_bot {
        background-color: grey;
        border: 2px solid black;
        width: 98%;
        margin: 1%;
        float: left;
    }

    #sushi{
        width: 20%;
    }
}

@media (max-width: 768px) {
    section {
        margin: 10px;
        padding-top: 0px;
    }

    .div_mobile{
        background-color: grey;
        border: 2px solid black;
        margin: 1%;
        margin-top: 20px;
        padding: 10px;

    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Module 2 solution</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Our Menu</h1>
    <section>
        <div class="div_fs div_tablet_top div_mobile">
            <div class="sign_fs" id="chicken">Chicken</div>
            <div class="text_fs" >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>
        <div class="div_fs div_tablet_top div_mobile">
            <div class="sign_fs" id="beef">Beef</div>
            <div class="text_fs" >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>        
        <div class="div_fs div_tablet_bot div_mobile">
            <div class="sign_fs" id="sushi">Sushi</div>
            <div class="text_fs">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>
    </section>
</body>
</html>

I believe I know the reason based on past experiences but for the sake of the OP and posterity you might want to explain why a font other than Comic Sans should be used. — Sᴀᴍ Onᴇᴌᴀ, Sep 18, 2020 at 14:36

Stack Exchange Network

Example of responsive webpage

2 Answers 2

Simplifying overall layout

Simplifying current rules

Simplifying padding

redundant styles can be combined

Excess class names

Your Answer

Not the answer you're looking for? Browse other questions tagged
html
css
html5
or ask your own question.

Hot Network Questions

Example of responsive webpage

2 Answers 2

Simplifying overall layout

Simplifying current rules

Simplifying padding

redundant styles can be combined

Excess class names

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged htmlcsshtml5 or ask your own question.

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
html
css
html5
or ask your own question.