search

sheri-thomson / ecommerce-pattern-library

A term-long project redesigning an ecommerce website focusing on making a pattern library.
https://loving-northcutt-3f17ec.netlify.com/pattern-library/#brand
0 stars 0 forks source link

Banner issue #4

Closed sheri-thomson closed 4 years ago

sheri-thomson commented 4 years ago

@thomasjbradley

Hi Thomas,

I'm having issues with my banner. I want the content to take up half the screen and be centred horizontally. Also, for the example used, i need the font to be a different colour.

thomasjbradley commented 4 years ago

The absolute & relative are in the wrong places.

relative should be on the same element as .banner And the text should have absolute

sheri-thomson commented 4 years ago

@thomasjbradley I switched it around and now its content is below the image

<div class="banner relative">
  <div>
    <img class="img img-flex" src="/images/product-banner.jpg" alt="">
  </div>
  <div class="island-1-2 product-page">
    <h1 class="absolute push-0">Products you can count on!</h1>
    <h4>All our products are certified organic, plant based and not tested on animals.</h4>
    <a class="btn" href="#">Learn more</a>
  </div>
</div>

Before I had this and it worked; I just couldn't figure out how to style it.. 

  <div class="absolute">
    <img class="img img-flex" src="/images/product-banner.jpg" alt="">
  </div>
    <div class="relative island-1-2 product-page">
    <h1 class="push-0">Products you can count on!</h1>
    <h4>All our products are certified organic, plant based and not tested on animals.</h4>
    <a class="btn" href="#">Learn more</a>
  </div>
</div>

What I needed to do was have the content only take up half the space and centred. I tried adding the grid and unit classes but it was messing it up. And should I be doing all the padding and what not here as well?