How do I prevent the button from moving when resizing the screen

Question

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.

css

: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;
} */

.sedan,
.suv,
.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%);
}

HTML

<main>
     <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.
         </p>
         <div class="btnBox">
           <button class="button">Learn More</button>
         </div>
       </div>
       <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.
         </p>

         <div class="btnBox"><button class="button">Learn More</button></div>
       </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.
         </p>

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

       </div>
     </div>
   </main>

   <footer>
     <div class="attribution">
       Challenge by
       <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
         >Frontend Mentor</a
       >. Coded by <a href="#">Your Name Here</a>.
     </div>
   </footer>

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

Posted 6-Feb-23 16:35pm

oceanotrash

Updated 6-Feb-23 22:08pm

Add a Solution

Comments

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

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Richard Deeming · Answer 1 · 2023-02-06T22:08:00

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.

CSS

.wrapper > div{
    display: flex;
    flex-direction: column;
}
.btnBox {
	margin-block: auto 20px;
}

Demo[^]

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[^]