Click here to Skip to main content
15,666,726 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
when I try to scale down the screen the button is slowly moving out of the container and it should stay in a fixed position at the bottom even tho the screen is smaller.


:root {
  --color1: hsl(31, 77%, 52%);
  --color2: hsl(184, 100%, 22%);
  --color3: hsl(179, 100%, 13%);

  --paragraphWhite: hsla(0, 0%, 100%, 0.75);
  --headingsWhite: hsl(0, 0%, 95%);

  --fontParagraph: "Lexend Deca", sans-serif;
  --fontDisplay: "Big Shoulders Display", sans-serif;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

body {
  font-size: 15px;
  font-family: var(--fontParagraph);
  background-color: var(--headingsWhite);
  color: var(--paragraphWhite);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;

.container {
  max-width: 1020px;

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-radius: 0.5em;
  margin: 2em;
  overflow: hidden;
  height: 450px;
  max-width: 1020px;

/* .wrapper > div{
    display: flex;
    flex-direction: column;
} */

.luxury {
  padding: 12% 15% 12% 15%;

.icon {
  padding-bottom: 20px;

.title {
  font-family: var(--fontDisplay);
  color: var(--headingsWhite);
  font-weight: 700;
  padding-bottom: 20px;

.text {
  line-height: 1.6;
  font-size: 16px;

.btnBox {
  padding-top: 80px;
 position: fixed;

.button {
  border: none;
  width: 120px;
  height: 35px;
  border-radius: 1em;

.sedan .button {
  color: var(--color1);

.suv .button {
  color: var(--color2);

.luxury .button {
  color: var(--color3);
.sedan {
  background-color: var(--color1);

.suv {
  background-color: var(--color2);

.luxury {
  background-color: var(--color3);

.attribution {
  font-size: 11px;
  text-align: center;
.attribution a {
  color: hsl(228, 45%, 44%);


     <div class="wrapper">
       <div class="sedan">
         <img src="/images/icon-sedans.svg" alt="sedan" class="icon" />
         <h1 class="title">Sedans</h1>
         <p class="text">
           Choose a sedan for its affordability and excellent fuel economy.
           Ideal for cruising in the city or on your next road trip.
         <div class="btnBox">
           <button class="button">Learn More</button>
       <div class="suv">
         <img src="/images/icon-suvs.svg" alt="" class="icon" />
         <h1 class="title">SUVs</h1>
         <p class="text">
           Take an SUV for its spacious interior, power, and versatility.
           Perfect for your next family vacation and off-road adventures.

         <div class="btnBox"><button class="button">Learn More</button></div>
       <div class="luxury">
         <img src="/images/icon-luxury.svg" alt="" class="icon">
         <h1 class="title">Luxury</h1>
         <p class="text">
           Cruise in the best car brands without the bloated prices. Enjoy the
           enhanced comfort of a luxury rental and arrive in style.

         <div class="btnBox"><button class="button">Learn More</button></div>


     <div class="attribution">
       Challenge by
       <a href="" target="_blank"
         >Frontend Mentor</a
       >. Coded by <a href="#">Your Name Here</a>.

What I have tried:

I tried first to display flex all the div inside the wrapper but the content inside got bigger. also, I tried to position fixed on the button box still it doesn't work
Updated 6-Feb-23 22:08pm
Member 15627495 7-Feb-23 3:16am    
if your button have a 'fixed' position whenever you resize your screen size, it's because you use 'px'.
to have a better adaptative display , use : '%' / 'rem' / 'em' / 'vw'.

other comment : you have too much main/container/wrapper for the same use. I'm convinced you can provide a better html.
the more container you use, applying css become too demanding ( hard to write ).

// 'main' and 'footer' tags can have 'class' and 'id'.
// a 'button' doesn't need a 'parent container' every time.
you write too much in my humble opinion.

once you have new html structure ( less code and tags ) , you'll be better at css ( because of a mastered Html ).

sometimes one container is enough , but if you go by 2 or 3 containers it's the hardest.

the :root: is 'body' tag, mind it's already a 'container', the first one.
if you write "body > container1 > container2 > text" instead of "body > text", you're failing at light and easy code. all the work after will be hard too.
Member 15627495 7-Feb-23 3:37am    
one helpful css is "position:relative;"
the childs tags inherits container 'position sets'. It's applying position of elements through the tags hierarchy.
B inherits A position sets.
Andre Oosthuizen 7-Feb-23 3:58am    
Member 15627495, your reply should be the answer to the OP's question - button is already a child of the parent, parent should be position: absolute; and button should be position: relative; as mentioned.
Graeme_Grant 7-Feb-23 4:07am    
push your code into something like CodePen[^] so it is easy for us to see what is happening.

1 solution

Update your CSS to use Flexbox on the wrapper children, as you started to do but commented out. Then use an auto margin on the btnBox to position it at the bottom.
.wrapper > div{
    display: flex;
    flex-direction: column;
.btnBox {
	margin-block: auto 20px;

NB: You should prefer the CSS logical properties and values over the older "top"/"bottom"/"left"/"right" versions, especially if you ever need to adapt your layout to different writing modes:
CSS Logical Properties and Values | CSS-Tricks - CSS-Tricks[^]
CSS Logical Properties and Values - CSS: Cascading Style Sheets | MDN[^]
margin-block - CSS: Cascading Style Sheets | MDN[^]
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900