How to Get Min-width Media-Query to Work for Mobile-First Design

Question

I am designing my web app to be mobile-first in design by using only the min-width media-query. However it is not working as how it should work! Instead of content being smaller at and below a screen-size of 500px, it is larger instead. And instead of content being larger at above a minimum screen-size of 500px, it is smaller. I want all content to be smaller at and below a minimum screen-size of 500px, and larger at screen sizes larger than 500px. I also want to have the "Generate Quote" and "Tweet" button shifted up or down to accommodate the changes induced by the min-width media-query

You can view my CodePen here: https://codepen.io/IDCoder/full/KZqNdr/

Here is my CSS code:

.container{
    text-align: center;
    background-image: url("https://s25.postimg.org/9pnce8yr3/galaxy-s8_overview_kv_type1b.jpg");
    /**https://s25.postimg.org/exhm9rejz/galaxy-s8_overview_kv_type1.jpg"**/
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    margin: auto;
    /**border: 3px solid grey;**/   
}



h1{
    color: white;
}



.Motorcycle{
    margin: auto;
    width: auto;
    /**border: 1px solid grey;**/
    text-align: center;

}

/**
.cropper{
    border-radius: 80px;
    opacity: 0.85;
}
**/

.btn.btn-default{
  color: #0040ff;
  font-size: .80em;
  font-family: Orbitron, sans-serif;
  line-height: 4em;  


}

.gstuff{
  background-image: url("https://s25.postimg.org/onteix7u7/G_Motorcycle_Helmet_3.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 350px;
    height: 477px;
    margin: auto;
    opacity: 0.85;

}

#push-one{
  transform: translateY(200px);
  background-color: #c6c6c4;
  border-bottom:2px inset #FFF;
  border-right:2px inset #FFF;
  border-radius:15px;
  height: 50px;
  width: 150px;
  margin: auto;
}

#push-two{
  transform: translateY(530px);
  background-color: #c6c6c4;
  border-bottom:2px inset #FFF;
  border-right:2px inset #FFF;
  border-radius:7px;
  height: 30px;
  width: 50px;
  margin: auto;
  line-height: 2em;
  color: blue;
}



@media(min-width: 500px){
  .gstuff{ 
  width: 250px;
  height: 341px;
  }
}

I achieved an adequate mobile-first min-widthwith this CodePen: , but I'm having a hard time achieving it with this one

Answer 1

For starters you have an error in your media query you need to specify screen and. Also, I assume that this is for the smaller screen size since gstuff has a wider initial setting.

@media screen and (max-width: 500px) {
  .gstuff{ 
  width: 250px;
  height: 341px;
  }
}

Next you need position:relative in your gstuff class. Finally, I absolutely position the tweet button bottom and in the center with:

#push-two{
  background-color: #c6c6c4;
  border-bottom:2px inset #FFF;
  border-right:2px inset #FFF;
  border-radius:7px;
  height: 30px;
  width: 50px;
  margin: auto;
  line-height: 2em;
  color: blue;
  position:absolute;
  bottom:0;
  left:50%;
  right: 50%
}

Absolute positioning only works when you use position:relative or absolute on the parent container.

Here is a codepen