Container Height Not Responsive

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Container Height Not Responsive

surface2air asked 7 years ago

Hi MDB Support, I have some questions about trying to achieve a flexible or responsive auto height across platform and device for a container I have on a web project. The example is the gradient banner with the music video near page top: http://gridinteractive.com/gma-2018/default.htm On desktops it looks fine, but the column content stretches and the video thumbnail gets clipped on smaller viewports, and that's not the desired result. Additionally, I am trying to vertically-center the column content of text, video thumbnail and image inside the gradient box (for desktop displays) and stack each column on smaller viewport displays. Any help with this would be much appreciated. Here's how Quirktools is rendering the page on mobile viewports: http://quirktools.com/screenfly/#u=http%3A//gridinteractive.com/gma-2018/default.htm&w=320&h=568&a=37&s=1 Thanks! Eric Seattle, Washington

Ollie Vincent pro answered 7 years ago

Hi, Its because you have put a 390px height on the class intro-container. You either need to use media queries or put the the background gradient on the container-fluid class. Then it will respond to the height of the content within.

surface2air commented 7 years ago

Hi Ollie, Thanks. I have tried to remove the 390px height on the intro-container, but that makes the whole section disappear! :o I will have to explore a media queries option for smaller viewports, because at the moment, I have to include a fixed height-size until a simpler solution can be discovered. Thanks, Eric Seattle, Washington

Ollie Vincent pro commented 7 years ago

By my reckoning, you could delete your <pre><div class="hm-gradient intro-container"></pre> and <pre><div class="full-bg-img"></pre> remove the height and max-height on the intro id (#intro) and put your background gradient on that. Worked for me in firebug (Firefox) and it responds well :) so your html looks like this:   <pre><div class="container-fluid view z-depth-0" id="intro"></pre> <pre> <div class="container content-box"></pre> *YOUR CONTENT HERE* <pre></div></div></pre> and you CSS like this: <pre>#intro{background:linear-gradient(to right, #8e9eab, #eef2f3); margin-bottom:20px;}</pre> Try that :) Good Luck

Marta Szymanska staff pro premium answered 7 years ago

Hi surface2air, is the Ollie Vincent's answer fine for you? Best, Marta

surface2air commented 7 years ago

HI Marta, Thanks, I will look into some of his other suggestions in the interim. Best, Eric Seattle, Washington

Marta Szymanska staff pro premium commented 7 years ago

Ok, great.

surface2air commented 7 years ago

I made some adjustments to my container, and had some new ideas for it, so it's working now. Thanks, Marta and Ollie.

Marta Szymanska staff pro premium commented 7 years ago

Cool.
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
surface2air
47Support score
20Questions 12Answers
0Snippets likes 0Snippets