Bootstrap Responsive Viewport and MDB CSS Class Support Need


Topic: Bootstrap Responsive Viewport and MDB CSS Class Support Needed!

surface2air asked a year ago

I have a couple of questions regarding a recent project:

01 - First, I am having some spacing issues regarding the section on my home page that is not adequately spacing a margin and / or padding below my section. On desktops, it's fine, but I would like to reduce the padding on the content by about 10px moving it up towards the .

On tablets, the text content overlaps my photo completely in portrait orientation (not the intended design). And on smartphone displays, I would like to increase the padding in portrait orientation between the photo and the section.

I have tried all kinds of combinations using bootstrap classes targeting breakpoint size (e.g., mt-sm-5, pt-sm-5) and using media queries for specific breakpoints and orientation, but I cannot seem to get this to work.

02 - Second question: I really like the "view + mask" effect, and I have succeed at leveraging that on the Schedule page of my project near page top. A rose-orange gradient overlays a rough concrete texture.

I wanted to recreate that on my home page in the Sidebar at page top in the asymmetric split view with the photo, but I can only seem to render the gradient overlay. I have tried some other similar tricks in CSS but I cannot seem to get the concrete.jpg texture to appear through the gradient overly on the sidebar.

Any help is greatly appreciated!

Thank you!

Eric, Seattle, Washington

Please refer to my live project here (there's only two pages: Home and Schedule):

http://kathyackerseattlesymposium.com/


TomekMakowski staff answered a year ago

Hi

Ad.1

You have to delete height=100vh on mobile devices becouse of that the page corrupts, and try to add mt-5 to row element

Ad.2

You have to put your image to <div class="view">, look at this article: https://mdbootstrap.com/docs/jquery/css/masks/


surface2air commented a year ago

Hi Tomek,

I have redesigned and recoded my layout concept from the ground up using CSS Flexbox. Thanks for the good catch on the view height (100vh) which I fixed, and I revisited the documentation for view+masks which work in the revamped code I have. In my original draft, there was too much going on, and I have cleaned it up with a more agile and cleaner solution that seems to support all variance of desktop and device viewport displays and orientation. Thanks!

Eric


TomekMakowski staff commented a year ago

You are welcome


Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: jQuery
  • MDB Version: 4.8.2
  • Device: Desktop, Tablet, Phone
  • Browser: Chrome, Firefox, Safari
  • OS: Mac OS, Windows, iOS, Android
  • Provided sample code: No
  • Provided link: Yes