Help Please - Unknown white bar (JS Routing or CSS issue?)

[deboer753]

I am using react to build my project and I cannot figure out what the heck is going on with this white bar issue (screenshots show black bar because I’m on dark mode).

I want to think its because of how I went about creating my routes and links to navigate from the home page, app.js, etc, to the j lohr seven oaks floating card page instead of a CSS issue. Ideally I’m trying to have my background cover the entire area of the page. Whether the background is the gray background color for the home page or the background black and white wallpaper of San Francisco, I want both pages to have a complete filled in background.

And yes, I have tried everything with CSS properties to the point where I think it might be a routing issue. Its either one or the other. it has to be I hope! Please help!

note: you can also clone my repo if easier GitHub - DeBoer753/s-and-s-grocery-PROJECT

also note: when using the app on the browser make sure to shrink window to smallest size in order to trigger media query and see the issue firsthand

APP.js

// REACT
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

// ROUTES
import Home from '../src/Routes/Home'

// CARDS
import JLohrSevenOaks from './Cards/JLohrSevenOaks'

// CSS
import './App.css';

// APP
const App = () => {
  return (
    <div className='app-container'>
      <BrowserRouter>
        <Routes>
          {/* WINE */}
          <Route index element={<Home />} />
          <Route path='/' element={<Home />}/>
          <Route path='/jlohr-seven-oaks-cabernet' element={<JLohrSevenOaks />}/>
        
          {/* BEER */}

        </Routes>
      </BrowserRouter>
    </div>
  );
};

export default App;

APP.css

.app-container{
  overflow: hidden;
  height: 90vh; 
  margin: 0;
  padding: 0;

  /* Default Wallpaper: */
  background-image: url('/public/imgs/wallpapers/sf_wallpaper70percent.png');
  background-size: cover; 
  background-position-x: -215px; 
  background-position-y: -130px;
  background-size: 800px;

  /* Holiday/Events Wallpaper: */
  /* 
  background-image: url('');
  background-size: cover; 
  background-position-x:  
  background-position-y: 
  background-size: 
  */
}
@media screen and (orientation: landscape) {
  .app-container {
      height: 80vh; 
      background-color: rgb(255, 255, 255);
      background-image: none;
  }
}

INDEX.js ( I dont think this is any different than react boiler code, but just in case)

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
    <React.StrictMode>
      <App />
    </React.StrictMode>
  
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

A - BACKSIDE DATA.js (place inside a folder called ‘Cards’ inside of src folder)

// BACKSIDE DATA
export const description1 = "Hello, and welcome to S and S Grocery! My name is Myles and I am a full time beverage sales rep / web developer hobbyist who created the card you are seeing now."
export const description2 = "My goal is to help grow not only our portfolio of wines, beers, and spirits, but more importantly to grow the neighborhood stores we know and love here in San Francisco through a digital perspective."
export const message = '"You are either waiting in line next to the cheese counter or you are just browsing around. Either way, thanks for scanning, and enjoy the rest of your day! :) - Myles"'
export const rescanTheQRCodeFor = "Rescan the QR codes during holidays and public events for updated themes and messages!"

JLOHRSEVENOAKS.js (place inside a folder called ‘Cards’ inside of src folder)

// REACT
import React, { useState } from 'react';

// DATA 
import { description1 } from './A-BacksideData';
import { description2 } from './A-BacksideData';
import { message } from './A-BacksideData';
import { rescanTheQRCodeFor } from './A-BacksideData';

// CSS
import styles from '../Cards/JLohrSevenOaks.module.css'; // Make sure to create a CSS file (e.g., FlipCard.css) for styling

// J LOHR SEVEN OAKS
const JLohrSevenOaks = () => {
  const [isFlipped, setIsFlipped] = useState(false);

  const handleCardClick = () => {
    setIsFlipped(!isFlipped);
  };

  return (
    <div className={styles.mainContainer}>
        

        <div className={styles.cardContainer}>
            <h1 className={styles.alert}>(Please return to vertical view)</h1>
            <div className={`${styles['flipCard']} ${isFlipped ? styles['flipped'] : ''}`} onClick={handleCardClick}>
                <div className={styles.flipCardInner}>




                    {/* Front side */}
                    <div className={styles.flipCardFront}>
                        <div className={styles.innerElement}>

                            <div className={styles.iconContainer}>
                                <div className={styles.tapIcon}>
                                    <img src={process.env.PUBLIC_URL + '/imgs/tap-icon.png'} alt="" />
                                </div>
                            </div>
                                
                            <img src={process.env.PUBLIC_URL + '/imgs/skus/jlohr_seven_oaks.png'} alt="" />
                            
                            <div className={styles.cardBottomHalf}>
                                <h5 className={styles.ofAge}>• Must be 21 years or older to purchase •</h5>
                                <h3>J. Lohr Seven Oaks Cabernet</h3>
                                <p className={styles.description}>Description</p>
                                <p className={styles.skuDescription}>J. Lohr Seven Oaks Cabernet is perfect for cozy evenings and social gatherings. With its rich aromas of black cherry and dark caramel, this full-bodied red wine elevates any moment. Enjoy its velvety profile during meals or special occasions.</p>
                                <div className={styles.miniBoxContainer}>
                                    <div className={styles.miniBox1}>
                                        <h4>Pairing</h4> 
                                        <hr />
                                        <h5 className={styles.pairing}>Steak<br />Beef stew<br />Grilled portobellos</h5>
                                    </div>
                                    <div className={styles.miniBox2}>
                                        <h4>Origin</h4>
                                        <hr />
                                        <h5 className={styles.origin}>Paso Robles, CA</h5>
                                    </div>
                                    <div className={styles.miniBox3}>
                                        <h4>Taste</h4>
                                        <hr />
                                        <h5 className={styles.taste}>Bold<br />Dry<br />Tannic</h5>
                                    </div>
                                </div>
                            </div>
                        </div>  
                    </div>




                    {/* Back side */}
                    <div className={styles.flipCardBack}>
                        <div>
                            <h1>Welcome to</h1>
                            <h2>S and S Grocery</h2>
                            <h3>{description1}</h3>
                            <h3>{description2}</h3>
                            <img src={process.env.PUBLIC_URL + '/imgs/message-icon.png'} alt="" />
                            <h3 style={{ fontStyle: 'italic' }}>{message}</h3>
                            <img src={process.env.PUBLIC_URL + '/imgs/events-icon.png'} alt="" />
                            <h3 className={styles.rescan}>{rescanTheQRCodeFor}</h3>
                        </div>
                    </div>




                </div>
            </div>
        </div>

    </div>
  );
};

export default JLohrSevenOaks;

JLOHRSEVENOAKS.module.css (place inside a folder called ‘Cards’ inside of src folder)

/* MAIN CONTAINER ---------------------------------------------------- MAIN CONTAINER */
.mainContainer {
    /* overflow: hidden;  */
    height: 110vh;
    /* background-color: ; */
    background-size: cover; /* Adjust to cover the entire container */
}

/* CARD CONTAINER ---------------------------------------------------- CARD CONTAINER */
.cardContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -120px;
    height: 120vh;
}
.alert {
    display: none;
    text-align: center;
    position: absolute;
    color: #878787;
    margin-top: 60px;
    font-size: 20px;
    font-style: italic;
}

/* FLIP CARD ---------------------------------------------------- FLIP CARD */
.flipCard {
    perspective: 2000px;
    width: 325px;
    height: 500px;
    animation: floatUpDown 1.5s ease-in-out; 
}
/* IMPORTANT: if you seperate the '.' from flipCard and flipped, it wont work */
.flipCard.flipped .flipCardInner {
    transform: rotateY(180deg);
}
.flipCardInner {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}
.flipCard::before {
    content: "";
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
}
  
/* FLIP CARD FRONT ---------------------------------------------------- CARD  */
.flipCardFront {
    /* Holiday/Events Background: */
    /* background-image: url('/public/imgs/backgrounds/test.png'); */
    background-size: cover; 
    background-position: 65% center; 
    padding-top: 0;

    /* Default Background: */
    background: radial-gradient(circle, #ffffff, #5d0808);
    background-position: center -30px;

    margin-left: -4.2px; /* Fixes the margin of the flip */
    width: 325px;
    height: 500px;
    border: 4px white solid;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.5);
    animation: floatUpDown 1.5s ease-in-out; 
}
.innerElement {
    text-align: center;
    color: #ffffff;
}
.iconContainer {
    background-color: #5d0808;
    width: 60px;
    height: 60px;
    position: absolute;
    left: 261px;
    top: 0px;
    border-top-right-radius: 5px; 
    border-bottom-left-radius: 9px; 
    border-left: 4px white solid;
    border-bottom: 4px white solid;
}
.tapIcon {
    width: 50px;
    position: absolute;
    left: 6px;
    top: 38px;
}
.flipCardFront img {
    width: 60%;
    margin-top: -200px;
}
.flipCardFront .cardBottomHalf {
    background-color: #5d0808;
    border-top: 3px white solid;
    margin-top: 5px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    position: absolute; 
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom-right-radius: 5px ;
    border-bottom-left-radius: 5px;
}
.ofAge {
    text-align: center;
    margin-top: 5px;
    margin-bottom: 0;
    margin-right: 10px;
    margin-left: 10px;
    font-size: 6.5px;
    font-style: italic;
    font-weight: 600;
}
.flipCardFront h3 {
    margin-top: 5px;
    margin-bottom: -10px;
}
.flipCardFront .description {
    color: white;
    text-align: left;
    font-size: 10px;
    font-weight: bold;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 15px;
    margin-bottom: 0;
}
.flipCardFront .skuDescription {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: 200;
    height: 70px;
    margin-top: 5px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 12px;
    text-align: left;
    border-radius: 8px;
    color: white;
}
.flipCardFront .miniBoxContainer {
    display: flex;
    justify-content: space-between;
}
.flipCardFront  h4 {
    font-size: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
}
.flipCardFront hr {
    border: 0.1px rgb(255, 255, 255) solid;
    width: 50px;
    margin-top: 2px;
    margin-bottom: 3px;
}
.flipCardFront .miniBox1 {
    background-color: #5d0808;
    width: 100%;
    height: 75px;
}
.flipCardFront .miniBox1 .pairing {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 10px;
    font-weight: 200;
    margin-top: 0px;
}
.flipCardFront .miniBox2 {
    background-color: #5d0808;
    width: 100%;
    height: 75px;
    left: 0;
}
.flipCardFront .miniBox2 .origin {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 10px;
    font-weight: 200;
    margin-top: 0px;
}
/* .flipCardFront .miniBox2 .score {
    font-family:Arial, Helvetica, sans-serif;
    font-size: 20px;
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 20px;
    font-weight: bold;
    color:white;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
} */
.flipCardFront .miniBox2 span {
    font-weight: bold;
}
.flipCardFront .miniBox2 h6 {
    margin-top: 5px;
    font-size: 8px;
    font-weight: 500;
    font-style: italic;
}
.flipCardFront .miniBox3 {
    background-color: #5d0808;
    border-radius: 10px;
    width: 100%;
    height: 75px;
}
.flipCardFront .miniBox3 .taste {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 10px;
    font-weight: 200;
    margin-top: 0px;
}

/* FLIP CARD BACK ---------------------------------------------------- FLIP CARD BACK */
.flipCardBack {
    /* background-image: url('/public/imgs/bubbles.PNG'); */
    background-size: cover; /* Adjust to cover the entire container */
    background-position: 65% center; 
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.5);
    
    border: 4px white solid;
    margin-left: -2.9px; /* Fixes the margin of the flip */
    display: flex;
    align-items: center;
    flex-direction: column;
    transform: rotateY(180deg);
}
.flipCardBack div {
    background-color: #5d0808;
    border-radius: 5px;
    height: 500px;
}
.flipCardBack h1 {
    font-family: cursive;
    text-align: center;
    font-size: 20px;
    color: white;
    margin-bottom: 5px;
}
.flipCardBack h2 {
    text-align: center;
    color: white;
    margin-top: 0;
    margin-bottom: 5px;
}
.flipCardBack hr {
    border: 0.1px rgb(255, 255, 255) solid;
    width: 150px;
    margin-bottom: 3px;
}
.flipCardBack img {
    width: 35px;
    margin-left: 145px;
}
.flipCardBack h3 {
    text-align: center;
    font-size: 13px;
    color: white;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    margin-top: 10px;
    margin-right: 30px;
    margin-left: 30px;
    font-size: 13px;
    font-weight: 200;
} 
.flipCardBack .rescan {
    font-weight: bold;
    font-style: italic;
}

/* FLIP CARD FRONT AND BACK ---------------------------------------------------- FLIP CARD FRONT AND BACK */
.flipCardFront,
.flipCardBack {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

/* OPACITY FADE ---------------------------------------------------- OPACITY FADE */
@keyframes fadeIn {
    0% {
        opacity: 0; /* Start with opacity 0 */
    }
    100% {
        opacity: 1; /* Fade in to opacity 1 */
    }
}

/* FLOAT UP ---------------------------------------------------- FLOAT UP */
@keyframes floatUpDown {
    0% {
        transform: translateY(70vh); /* Start below the screen */
        opacity: 0;
    }
    45% {
        transform: translateY(-2vh); /* Float above the middle of the screen */
        opacity: 1;
    }
    70% {
        transform: translateY(0vh); /* Stay in the middle */
        opacity: 1;
    }
    100% {
        transform: translateY(0); /* Remain at the middle */
        opacity: 1;
    }
}

/* LANDSCAPE MODE ---------------------------------------------------- LANDSCAPE MODE */
@media screen and (orientation: landscape) {
    .mainContainer {
        background-color: rgba(58, 156, 221, 0);
    }
    .flipCardInner {
      display: none; /* Hide the body in landscape mode */
    }
    .alert {
        display: block;
    }
  }

HOME.jsx (place inside a folder called ‘Routes’ inside of src folder)

// REACT 
import React from 'react';

// ROUTER
import { Link } from 'react-router-dom';

// CSS
import styles from './Home.module.css';

// HOME
const Home = () => {
  return (
    <div className={styles.homeContainer}>
      <h1>Searchlight Market</h1>
        {/* WINE */}
        <Link to='/jlohr-seven-oaks-cabernet'>J. Lohr Seven Oaks Cabernet</Link>

        {/* BEER */}
        
    </div>
  );
};

export default Home;

HOME.module.css (place inside a folder called ‘Routes’ inside of src folder)

/* This pagve used to be traditional css style. example Home.css instead of module and the .home-container instead of .homeContainer AND you didnt have overflow: scroll before. */

.homeContainer {
    background-color: rgb(81, 81, 81);
    height: 100vh;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow: scroll;
}
.homeContainer h1 {
    margin-top: 0;
    padding-top: 10px;
    color: white;
}
a {
    font-weight: bold;
    color: gold;
    font-size: 5px;
}

If you want to use the same images Ive used I have attached them to this post alogn with screenshots of the issue.

[a2937]

That’s a lot to sort through. And those images might be retracting from the post itself because they are fairly big.

As for the black bar at the bottom, there’s a pretty good it is an element on the page.

[0x74h51N]

Do you mean you couldn’t cover the entire background with the image? If that’s the issue, it might be related to your .app-container class. If you set the .app-container class to 100vh (or 100svh, which is always better), it should cover the entire page. Also, using background-size: 800px; invalidates background-size: cover;. Instead, you can use background-size: 100% auto; for a better responsive cover.

Additionally, it’s better to always set the main container to 100vh. You can create space with padding or margin.

Edit:
Also, browser developer tools are always the best way to identify which element or class is causing the problem. If you’re still having trouble with this, the solution may vary, I couldn’t use dev tools to find problem. If you’ve deployed your project to Vercel or a similar service, it would be easier for us to troubleshoot and identify the issue.

Also, you’ve applied the vh unit to many of your elements. However, it’s sufficient to set the main container to 100vh; for inner containers, using 100% height would be a better solution. It’s also advisable not to exceed 100vh, as it can lead to various problems. Additionally, for vertical and horizontal alignment, using display: flex; justify-content: center; align-items: center; would be more effective.

For responsive design, focus on adjusting the width of elements. If an element is using flex, you may not need to change its width, you can use 100%, but for fixed-size elements, adjusting width is necessary. Additionally, consider modifying font sizes, paddings, or margins to accommodate different screen sizes.

.app-container{
  overflow: hidden;
  height: 90vh; 
  margin: 0;
  padding: 0;

  /* Default Wallpaper: */
  background-image: url('/public/imgs/wallpapers/sf_wallpaper70percent.png');
  background-size: cover; 
  background-position-x: -215px; 
  background-position-y: -130px;
  background-size: 800px;

  /* Holiday/Events Wallpaper: */
  /* 
  background-image: url('');
  background-size: cover; 
  background-position-x:  
  background-position-y: 
  background-size: 
  */
}
@media screen and (orientation: landscape) {
  .app-container {
      height: 80vh; 
      background-color: rgb(255, 255, 255);
      background-image: none;
  }
}

[lasjorg]

You have set height: 90vh; on the app container. The color at the bottom is the html/body color. You can test that as well by giving the body background-color: red

I would suggest pretty much always using min-height and not height unless you have a very good reason not to.

[deboer753]

0x74h51N and lasorg, thank you for your response! I forgot to mention a very import part:

• first of all, yes 100vh does fix the problem, although I forgot to mention I am going for a certain specific look (not your oridinary look) regarding my app when in use by a user
• when a user opens up my app, they are ONLY opening it up through their phone
• when they open up the page, they only see the J lohr wine card page, and NEVER the home page where it says “searchlight market” on top of the gray background. Consider the gray background page as a type of ‘admin page’ of which only the web developer (myself and you) can see, and not the user/consumer. for a better idea of how my app works. the user has to scan a QR code for the j lohr wine card page to appear - but please note, that the problem that exists lies both with the admin home page and the wine card page as previously mentioned in last post.
• That being said, I should have mentioned that you need to add on --host (YOUR LOCAL IP ADDRESS OF YOUR MOBILE PHONE) as shown below in the snippet:

 "scripts": {
    "start": "react-scripts start --host 10.0.0.56",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

• once you have added your mobile phone host IP address to the “start” value within the " scripts" object…then NPM run start to view the app on mobile, which of course will also show on your browser screen simultaneously.
• Now…the main goal I am trying to accomplish is that when a user opens up the J Lohr wine card page, they then CANNOT scroll downwards or upwards whatsoever as if the page is completely static (you could almost say I am going for a frozen page look, but the only thing that is supposed to work is being able to flip the card front and back.
• In the past I have tried the 100vh look as you both have mentioned, but if you clone the repo and try it your self while looking both at your computer screens and your mobile screens, you will notice that ONCE you change it from 90vh to 100vh, then you can scroll ever so slightly on mobile.
• I want to be able to NOT even involve any sort of scroll whatsoever…Not even the slightest scroll.
• Yes, the 100vh fixes the background fill, but then the scroll comes back into play which I want to avoid completely.
• …So how can I get rid of the white bar (black bar if in dark mode) to where I can show the entire background while not being able to scroll even the slightest while in mobile view?

Sorry, I should have mentioned this prior. I had struggled with this problem two months ago and then moved on to finishing my project.

This project/repo is actually a duplicate project with less code to make it easier to explain online

There is another project that I finished that is the original Searchlight Market project. —this is actually the S and S project that I am asking about. I am going to change the home page title to S and S to avoid confusion as well.

[lasjorg]

You can try using svh or dvh

New Viewport Units

---

I honestly didn’t read everything, so if this isn’t the issue, please TL;DR it for me.

[deboer753]

DVH! ahhhhh thank youuuuuu