DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
irenejoeunpark
irenejoeunpark

Posted on

[Hacktoberfest 2021] Responsive design with css

My third contribution to the hacktoberfest 2021 was fixing the responsive design.
When I saw the word "responsive", it seemed very interested for me because I have not worked on css for a while after second semester of school.
I chose the issue that I could bring up my old memories from few years ago.
https://github.com/mohitbalwani/Citi-site/issues/1

It is an one-page website that is created with html and css only now, and had some bug with the last section when reducing the window size.
Image description

The update was made with css. I first updated the division of the section as two-column design.
Inside "row 4" division, I added two more divisions for the column designs. And added width as percentages to make those columns align horizontally.

.column {
    float:left;
}
#col1 {
    width: 55%;
}

#col2 {
    margin:0%;
    width: 45%;
}
Enter fullscreen mode Exit fullscreen mode

After, I wanted to add some specific rules for smaller windows, by using "@media" struct.


@media(max-width:700px){
    .row4 {
        height: 70vh;
    }
    .column h1{
        font-size: 2rem;
    }
    .form{
        font-size: 1.2rem;
    }
    .column button{
        width: 22vw;
        text-align: center;
    }
    .column {
        align-items: center;
    }
}

Enter fullscreen mode Exit fullscreen mode

After the fixes, with the smaller windows, width under 700px it looked like the image below.
Image description

Also, I added another media struct for even smaller windows such as phones.
Image description

This issue had very little description and no Readme.md in the project, and that made me understanding the code little longer. However the owner of the project was very responsive and communicated with me well so that I could move on to solve the issues.

You can find my pull request on this issue below.
https://github.com/mohitbalwani/Citi-site/pull/4

Top comments (0)

DEV has this feature:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›