that’s my first message here and i have a little problem on my personal portfolio :
So i’m using react-bootstrap on a create react app with react router dom.
The problem is that if i put 100vh in the parent div in the App.js that works well on desktop but not on the mobile.
and on the contrary when i put 100%:
it’s perfect on mobile but there is some blank on my page on desktop
Say me if you need some other sources to help me, if you help me ! 
@vinzsgs75 When you say it doenst work for mobile tel the exact behavior, and put some css code if possible
I’m not familiar with React but can you check whether the following line of code is defined somewhere in the <head> of your document or if React does this for you?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
i’ve experienced the problem you describe when i haven’t explicitly defined viewport width.
hey , yes i have the viewport in my index.html
check out there on my portfolio :
www.vincentseriegesdotcom/
@vinzsgs75 do you use media queries?
You must use media queries when you want your layout have a certain behaviour for a certain size of screen
@vinzsgs75 If you want your app to be responsive media queries is important to know…
Here is a useful link : Responsive web design principle
can you expand on what you mean by ‘works well on desktop but not on the mobile’?
maybe a screenshot so we can get a clearer picture?
just go on www.vincentseriegesdotcom/ replace the dot by a real dot
do you have height set to 100vh currently? if so can you change it to 100%? (or vice versa if its set to 100%)
Also, did you create the class .containerLandingPage or was that provided by React?
currently yes thats 100vh, . containerLandingPage is the css class for the container of my homepage
disclaimer: while i’m adept at css/html i have not used react so hopefully a better react dev can chime in.
the whitespace you are seeing at the bottom of the page is the <body> which has an unset background color which is why you see white (or it may set to white). and the reason you are seeing it is because the div with class .containerLandingPage is extending to cover the maximum height of the viewport. when you restrict the width, the content on the page becomes ‘longer’ (due in part to normal flow behavior and the 4 different media queries which are being applied) than the viewport so the background now becomes visible.
notice the elements on the page (the h1, the paragraph, the icons) are still in their proper place regardless of screen width. you can change their font color to a darker hue to test this and see it is only .containerLandingPage that is causing the appearance of whitespace.
normally, to make an element consume the full height of the viewport you need to define the viewport in your <head>, set height to 100vh on the <body> or <html> element, then set the desired child element to height=100vh. I’m assuming all of these must have been done but without knowing more about react i can’t be sure to what degree. for example, height seems to be set to 100% !important on <html> so if the initial height=100vh value was set on <html> then it could be overwritten. or maybe the only place height=100vh is set is when you did it explicitly which may cause odd behavior.
you could simply ignore the cause and set your body background color to the same dark blue as .containerLandingPage. You could alter the media queries to make the central image, text and icons responsive in size so they remain within the viewable area of the viewport.
those may not be ideal solutions, but hopefully that steers you in the right direction.
on a side note: you may also notice that
.containerLandingPageappears like it is slightly longer than height=100vh, this is because.containerLandingPagestarts below yournavso you are really saying 100vh + ‘the height of my nav bar’. if you set.containingLandingPageto a position of absolute and push it to the top, making sure it is ordered behind the nav bar, then it would cover the exact height of the viewport.
man you’re a genius it was that , i needed to set the background of the body as the same color omg i’m so dumb, thanks you for your attention
far from a genius but thank you.
and no calling yourself dumb!