Product landing page

[larrycode1]

@bbsmooth You’ve always been my Saviour at every point in time
I can’t thank you enough brother…Honestly immediately i set the display property to block, it centered my select button instantly…Like i told you a couple of days back, you should create a platform where you’d teach young techies how to code because you really good at it…Once again thank you so much i greatly appreciate your help!!!

[bbsmooth]

Thanks for the kind words but I’m really nothing special. After you do this long enough you just know these types of things. You’ll get there too my friend. Keep it up.

[larrycode1]

@admit8490 Thank you my friend for taking your time to help me out…You guys are the best & i greatly appreciate your help…Happy coding!!!

[larrycode1]

@bbsmooth Sure i strongly agree with you on that i believe consistency is key!!!

[tojiyev.akbarjon]

Hello )

You can do this with 2 ways:
1-way

.product > button {
  font-size: 15px;
  background-color: lightgreen;
  margin: 5%;
  padding: 1em;
  width: 29%;
  margin-left: 8.5rem;
}

We can see in above code, you wrote 5% margin for button element. Remove this margin in media-query and set text-align: center to .product. Example:

@media only screen and (max-width: 768px) {
    .product {
        text-align: center;
    }

    .product > button {
        margin: 0;
    }
}

2-way
If you know display flex this is not a problem
You should set .product display flex in 768px media query and flex-direction column, align-items center

@media only screen and (max-width: 768px) {
    .product {
        display: flex;
        flex-direction: column;
       align-items: center;
    }

    .product > button {
        margin: 0;
    }
}

[larrycode1]

@tojiyev.akbarjon Thank you for your help, i’ll see to that!!!