Responsive Design Advices / articles for my portfolio website?

Projects Personal Projects
1

Hello there. I have been learning to code since 2weeks in order to build my minimal website visible here. I am exploring now advanced CSS courses and it looks like at some point soon I will have to explore JS as well.
Right now my page is not responsive and I would like my page to size any kind of screens. I’ve been trying to find courses or even posts on the forums in order to understand how to build a more responsive design, screen-size-speaking. I did not find a clear path tho. I thought about using CSS grids or flex-box, yet i am feeling not sure it is the best tools to use.

Any help is welcomed !

2

Sounds like the Front-End Engineer Path is the one for you. Especially lesson 9, which covers responsive design.
I hope you find what you’re looking for there :slight_smile:

3

Thanks ! It is actually the one I followed. I get it for the most part, yesterday I cleaned my code and improved it for the most part.
But for some reasons I am having a hard time understanding how to set first the box that is gonna become flexible after through different devices (if it is the solution). I followed a tutorial on Medium that tbh I partly but not totally get…
I am on pause for today, I will go back to study this problem tomorrow :upside_down_face: .
Here’s my code if any magical person has a solution in mind.

*, *:before, *:after {

    -moz-box-sizing: border-box;
    
    -webkit-box-sizing: border-box;
    
    box-sizing: border-box;
}
p, .contact {
        font-family: "EB Garamond", "Times New Roman", serif;
        font-size: 1;
        font-weight: 400;
        margin-left: 2.78%;
}
.contact {
        margin-top: -0.693%;
}
.love1 { color: green;
}
.love2 { color: aquamarine;    
}
.love3 { color: rgb(176, 89, 54);      
}
.love1,.love2,.love3 {
    margin-top: -0.347%;
}
body {
    line-height: 0.625em;
    position: fixed;

}
.contact {
    margin-top: -0.693%;
}


@media only screen and (min-width: 800px) and (max-width: 2000px) {
    
    .column {
        float: left; 
        margin-left: 5%;
    }
    .column:first-child {
        margin-left: 5%;
    }
    .column.side {
        width: 20%;
    }
    .column.main-content {
        width: 80%;
    }
    .image1 {
        margin: auto;
        height: auto;
        width: 36.25%;
        justify-content: left;
        min-width: 36.25%;
        overflow: scroll; 
    }
        
        
}

/*----MOBILE----*/
@media only screen and (min-width: 375px) and (max-weigth: 800px) and (orientation: portrait) {

    .column.side, .column.main-content {
    margin: 0; width: 100%;
    }
    .image1 {
    }
}

/*----BIG--SCREEN----*/
@media only screen and (min-width: 2000px) {
    .column.side, .column.main-content {
    margin: 0; width: 100%;
    }
}