search

creativetimofficial / ct-paper-kit-2-pro

Paper Kit 2 PRO is a premium Bootstrap 4 UI Kit with a huge number of components, sections and example pages.
https://www.creative-tim.com/product/paper-kit-2-pro
21 stars 6 forks source link

Add image to text in Carousel #18

Closed ASGrant55 closed 5 years ago

ASGrant55 commented 5 years ago

I am developing a site using Paper Kit Pro 2, and have a carousel on the home page. http://www.lock.cgiadvertising.com/image-test.html

On the third carousel item, I want to add an image as a part of the text, but I'm unable to size the image correctly. It's taking on the style of the entire container.

I've attached screenshots that show how I want it to look, vs what is actually happening. whatiwant whathappens

This is the html, starting on line 146:

       <div class="carousel-item">
          <div class="page-header" style="background-image: url('assets/img/safeidlock/istockphoto-647577820-2048x2048.jpg?dpr=2&amp;auto=format&amp;fit=crop&amp;w=1500&amp;h=1000&amp;q=80&amp;cs=tinysrgb&amp;crop=')">
            <div class="filter-safelockdarker"></div>
            <div class="content-center">
              <div class="container">
                <div class="row">
                <div class="col-md-6 text-left">
                  <div class="col-md-6">
                    <h1 class="title">$1,000,000 ID Theft Protection Policy</h1>
                    <h4 class="title"><i class="fa fa-lock" aria-hidden="true"></i> Fast, professional Identity Restoration</h4>
                    <h4 class="title"><i class="fa fa-lock" aria-hidden="true"></i> Access your credit score and report - Anytime</h4>
                    <br />
                    <div class="buttons">
                      <a href="plans-and-pricing.html" class="btn btn-primary btn-round  btn-lg">
                        <span style="color:#bbbbbb">Get</span> <span style="font-weight:900;color:#ffffff">Safe ID Lock</span><span style="color:#bbbbbb"> Today! <i class="fa fa-caret-right fa-lg" aria-hidden="true"></i></span>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
groovemen commented 5 years ago

Hello @ASGrant55,

Thank you for using our products, there are two possibilities to set a specific size for the last carousel-item's photo. I noticed that you setwidth: 100%; height: 100vh; for the image; in this case you should wrap the image into a <div> that has a specific height and width. E.g. height: 200px; width: 200px; Another method would be by setting directly to img a specific height and width (in pixels).

Hope that information helps you. Please let us know if we can help you with anything else.

All the best, Stefan