BOOTSTRAP NAVBAR AND CAROUSEL - mobile

I have a problem when using Boostrap's navbar and carousel since in PC view it hides the image behind the navbar and when you put mobile view it hides the carousel images even more. some help?
Thanks for the support!
enter image description here

Related

React Pro SideBar won't stay sticky to the right of screen when scrolling content

Has anyone used react-pro-sidebar before? I am trying to make the sidebar sticky and allow my content to scroll. But every time my content goes below the viewport, the sidebar is not sticking.

How to collapse React Bootstrap mobile Navbar when tapping anywhere?

I would like to collapse the mobile react bootstrap navbar when tapping anywhere on the screen. I know collapseOnSelect exists to make the mobile navbar collapse when an item is selected, but I'd also like to achieve the same thing when the user taps anywhere on the screen. Not sure if its possible, I can't find anything in the documentation.
Thanks!

React JS when click menu button, entire page shift right

I need your suggestion. I want to develop website in React JS. For start I draw a wireframe. I'm planning to use react libraries if possible. Below is my wireframe. Can I know for a start, what I should search. The 1st image will be the UI. When I click the hamburger button, the page will slide right as shown in 2nd image. Please help guys
Image 1
enter image description here
Image 2
enter image description here
There's a few things you will need to consider:
Storing and toggling the open/close state of your sidebar
The layout of your DOM elements
The transformation of your page content
Here's a sandbox to help you out: https://codesandbox.io/s/adoring-napier-s8gs09?file=/src/App.js

How do I resize images and divs in a responsive design?

I have hacked together a filterable portfolio with thumbnails on one page and a variation of it on my homepage. Problem is when I resize the browser on the homepage, the thumbnails don't resize the same way they do on the portfolio page. Instead on the homepage they break into two columns, then one as the browser shrinks.
I have been pulling my hair out over this - any suggestions? Thanks!
Homepage - http://riverso.marketplicity.com/
Portfolio Page - http://riverso.marketplicity.com/representative-projects/
*Resize the browser to about 960px on each of the page to see the differences.
Thanks in advance!
Add this css
img
{
max-width:100%;
height:auto;
}

AngularUI Bootstrap Modal with Video flickers while loading

I am trying to display an AngularUI based Bootstrap Modal window which has embedded YouTube videos in iframes. Everything works fine but while loading the modal window flickers at least once before the entire modal content is loaded.
From whatever I researched I can understand that Bootstrap modal opens up before the contents are loaded completely and the iframes in which the Youtube videos are embedded is causing it.
Any idea why this is happening and suggestions to avoid the flicker will be appreciated.
adding ng-cloak to the template used for the dialog fixed the same issue for me.

Resources