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

surface2air free asked 4 years 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/


Tomek Makowski staff answered 4 years 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 free commented 4 years 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


Tomek Makowski staff commented 4 years ago

You are welcome



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB 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