Tag Archives: HTML

After practicing with CSS and learning more about vw and vh, I decided to look at my code again to see if I can fix my landing page.

What is the issue with my landing page?

Like many websites today, I wanted my page to be responsive across screens of different sizes. When I was using Google Chrome’s Developer Tools, I noticed that my profile picture was more of an oval shape around the media query cut-off point of 900px.

Here is my original code for that element:

.left img {
  width: 300px;
  border-radius: 50%;
  border: 3px solid #EEE2DC;
}

@media screen and (max-width: 900px) {
  .left img {
    width: 20%;
    height: 20%;
    min-width: 125px;
    min-height: 125px;
}

Now that I’ve had more practice with CSS, I’m looking at my code and wondering why I put a height declaration in my media query as well as a width declaration.

Just to be sure, I commented out the height declaration and previewed my code (after making sure my file is saved!) with Live Server. Sure enough, my profile picture doesn’t turn into an oval in the 750 to 900px range.

I did take it a step further and changed my width pixels and played around with viewport units.

The following code is what I settled on:

.left img {
  width: 15vw;
  border-radius: 50%;
  border: 3px solid #EEE2DC;
}

@media screen and (max-width: 900px) {
  .left img {
    width: 10vw;
    min-width: 125px;
    min-height: 125px;
}

Now, when I change the height and width of the screen, my profile picture does change size, but it stays in the form of a circle.

It’s not a monumental change, but the small changes add up!

If you want to see the live landing page, head on over to melissazpd.com. Feel free to check out my code for this page on GitHub, melissazpd.