search

Gscott0138 / call-to-action-banner

Use CSS position along with float to create a call to action banner.
0 stars 0 forks source link

Styling Issues #1

Open Gscott0138 opened 6 years ago

Gscott0138 commented 6 years ago

After playing around with it for a while now, nothing is working the way I want it too.

Firstly the background does not grow and shrink like it is supposed. Secondly, the logo image is not the right size and it stays in the same place and does not flow with the website. The text flows but now how it is supposed to at all. Although it looks close to the final product, it does work the way it is supposed too at all.

Any help, hints, or tips would be much appreciated because I am completely stumped.

@thomasjbradley

thomasjbradley commented 6 years ago

Let’s start with the main background image. It should not be absolute. We only make the things that we’re moving in front of other things absolute. All it should do is use or basic .img-flex class.

The .img-flex class should only contain this CSS:

.img-flex {
  dislpay: block;
  width: 100%;
}
Gscott0138 commented 6 years ago

When I was waiting for your reply I decided to restart the css code. I deleted everything and started fresh which helped!

Things work much better, but the logo image is not where it is supposed to be and does not move the way it is supposed to as well.

The text and the image are below the banner background instead of on top. I am figuring it out, so hopefully by your next reply I have figured it out, if not I'll let you know.

Any help would be great.

-Griffin

@thomasjbradley

thomasjbradley commented 6 years ago

Much better! I see a few small improvements right now:

  1. The .img-flex class should be directly on the mecha <img> tag, not on the surrounding <div>—but you do need a class on that <div>
  2. There should be a width on .banner-text & the <div> surrounding the mecha image—like 35% & 60% (approx.)
  3. The position: relative needs to be on a parent element, so it should be on .banner not on .img-banner