How do I make the size of my jumbotron not dependent on the size of what's within it?

Get Help General Programming
#1

How do I make the size of my jumbotron independent from the size of whatever is contained within it?

I used Padding. But then when I view the site on small screens, the size of the image remains the same. How do I keep the image at one size at all times?

This is my code for my jumbo.:

<p class=".text-white text-center">Optical</p>  -->

  <div class="jumbotron jumbotron-fluid .bg-secondary" style="background:url(./pictures/Dinno\ Optical\ advert.jpg) no-repeat; background-size: cover; padding: 300px;"> 

  <div class="text-center" style="opacity: 0.9;"> 

    <img src="pictures/Dinno Optical main page pic.png" width="300" height="300">

  </div>
#2

What about creating a support class that specifies whatever dimension you want to give it?

<div class="jumbotron support-jumbotron">

.support-jumbotron {
  width: 400px;
}
1 Like
#3

I’ll try it thanks :smiley: