Reduce size of div container

[djboziah]

I am not sure where to reduce size of container . I have tried to edit the css associated with the container, but no luck.

<div class="hero-wrap">
	    <div class="home-slider owl-carousel">
			
	      <div class="slider-item" style="background-image:url(images/bg_20.jpg);">
	      	<div class="overlay"></div>
	        <div class="container">
	          <div class="row no-gutters slider-text align-items-center justify-content-center">
		          <div class="col-md-12 ftco-animate">
		          	<div class="text w-100 text-center">
		          		
			            
		            </div>
		          </div>
		        </div>
	        </div>
	      </div>

	      <div class="slider-item" style="background-image:url(images/bg_7.jpg);">
	      	<div class="overlay"></div>
	        <div class="container">
	          <div class="row no-gutters slider-text align-items-center justify-content-center">
		          <div class="col-md-12 ftco-animate">
		          	<div class="text w-100 text-center">
		          		
			            
		            </div>
		          </div>
		        </div>
	        </div>
	      </div>

	      <div class="slider-item" style="background-image:url(images/bg_3.png);">
	      	<div class="overlay"></div>
	        <div class="container">
	          <div class="row no-gutters slider-text align-items-center justify-content-center">
		          <div class="col-md-12 ftco-animate">
		          	<div class="text w-100 text-center">
		          		
			            
		            </div>
		          </div>
		        </div>
	        </div>
	      </div>
	    </div>
	  </div>

here is the css associated with div container.

.hero-wrap {
  width: 100%;
  height:100%;
  position: inherit;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  position: relative; }
  @media (max-width: 1199.98px) {
    .hero-wrap {
      background-position: center center !important; } }
  .hero-wrap .overlay {
    position: absolute;
	padding-left: 10;  
	top: 0;
    left: 30;
    right: 30;
    bottom: 0;
    content: '';
    opacity: .4;
    background: #000000; }

[PaulOB]

HI,

Sorry there is not enough information there to help with your problem. Do you have a link to the problem page so we can see it live?

If not then we will require enough code to make a demo of your problem so that we can start to address your problem. There could be many factors involved especially as you seem to be using bootstrap and an owl carousel yet you do not say which container is giving you the problem and what sort of size you require it to be?

Is it the hero-wrap that you are trying to adjust? If so it is impossible to tell what will happen in the code you provide as we would need to see all the html above it. You are using height:100% and that won’t work unless you have a parent with a height defined or an unbroken chain of parents all with height defined (other than auto).

You are also missing all the units from your .overlay rule and some browsers will treat a missing unit as zero.

The more you can do to help us the better help we will be able to provide rather than throwing guesses at the problem

[djboziah]

Thanks for your response, here is the link to the website. http://www.exclusivelimoservices.com/.
Yes i am trying to change the size of the hero-wrap, it is using owl carousel.

[PaulOB]

I woulkd look ar adjusting these 2 heights in tandem to see if they are the correct height controllers of that carousel.

Assuming that’s the item you were interested in.

.hero-wrap {height:400px}
  .owl-carousel.home-slider {
       height:400px;
 }

The height was 100% on the hero-wrap and 600px on the owl-carousel class. I just changed both to 400px to test but adjust to suit. You won’t be able to make it much smaller as it will look odd. Unless of course you were trying to make it larger?

[djboziah]

Thank you…It worked!