In the desktop view, padding, margins, and shadows mysteriously vanish, yet magically reappear when inspected. This bug stubbornly remains

Currently, I am working on a prototype portfolio site for a school project. My strength lies in the front end development area. Interestingly, when I check the site normally, there seems to be no padding or margin visible. However, upon using inspect element and resizing the window down to the breakpoint, it appears much more appealing with the appropriate margins, padding, and shadows.

 CSS 
     .neumorphicDefault {
        background-color: transparent;
        box-shadow:  0.5rem 0.5rem 1rem #d1d9e6,
                     -0.5rem -0.5rem 1rem #ffffff;
        text-decoration: none;
        margin: 1rem;
        text-align: center;
    }



 .neumorphicActive {
        background-color: transparent;
        box-shadow:  inset 5px 5px 10px #d1d9e6,
                     inset -5px -5px 10px #ffffff;
        text-decoration: none;  
        margin: 1rem;
        padding: 1rem;
    }

<!-- HTML -->
    <div class="container-fluid" id="cover">
    <!-- NAVIGATION -->
        <div class="d-flex justify-content-center">
            <nav class="navbar navbar-expand-sm">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon">
                        <i class="fa-solid fa-burger align-middle"></i>
                    </span>
                </button>
                <div class="collapse navbar-collapse">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link rounded-pill text-custom-gray neumorphicActive" href="#portfolio">Portfolio</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link rounded-pill text-custom-gray neumorphicDefault" href="#about">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link rounded-pill text-custom-gray neumorphicDefault" href="#projects">Gallery</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link rounded-pill text-custom-gray neumorphicDefault" href="#contact">Contact</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
        
        <!-- WELCOME SECTION -->
        <div class="container-fluid ms-lg-5 mt-5 p-sm-5 welcomeSection">
            <div class="row">
                <div class="col-8">
                    <div class="text-custom-gray m-1" style="font-size: 5vw"> Hello, I am <span id="nameSpan">Chandler Renteria</span></div>
                    <div class="text-custom-gray  m-1" style="font-size: 5vw"> Full-Stack Developer</div>

                    <div class="d-flex">
                        <a  class="rounded-pill ms-0 mw-25 text-custom-gray neumorphicDefault" href="#portfolio">See My Work</a>
                        <a  class="rounded-pill mw-50 text-custom-gray neumorphicDefault" href="#contact">Start A Conversation</a>  
                    </div>              
                </div>  
                <div class="col welcomeGraphic">
                    <div class="graphic w-100">Placeholder</div>
                </div>
            </div>
        </div>
    </div>

https://i.sstatic.net/khNvo.jpg

https://i.sstatic.net/jAICY.jpg

Answer №1

Consider utilizing this content delivery network (CDN) as you might be encountering issues with the installation process.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcbeb3b3a8afa8aebdac9ce9f2eef2ecf1beb9a8bded">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

.neumorphicDefault {
        background-color: transparent;
        box-shadow:  0.5rem 0.5rem 1rem #d1d9e6,
                     -0.5rem -0.5rem 1rem #ffffff;
        text-decoration: none;
        margin: 1rem;
        text-align: center;
    }

 .neumorphicActive {
        background-color: transparent;
        box-shadow:  inset 5px 5px 10px #d1d9e6,
                     inset -5px -5px 10px #ffffff;
        text-decoration: none;  
        margin: 1rem;
        padding: 1rem;
    }
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddbfb2b2a9aea9afbcad9de8f3eff3edf0bfb8a9bcec">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- Sample HTML -->
    <div class="container-fluid" id="cover">
    <!-- NAVIGATION -->
        <div class="d-flex justify-content-center">
            <nav class="navbar navbar-expand-sm">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon">
                        <i class="fa-solid fa-burger align-middle"></i>
                    </span>
                </button>
                <div class="collapse navbar-collapse">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link rounded-pill text-custom-gray neumorphicActive" href="#portfolio">Portfolio</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link rounded-pill text-custom-gray neumorphicDefault" href="#about">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link rounded-pill text-custom-gray neumorphicDefault" href="#projects">Gallery</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link rounded-pill text-custom-gray neumorphicDefault" href="#contact">Contact</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
        
        <!-- WELCOME SECTION -->
        <div class="container-fluid ms-lg-5 mt-5 p-sm-5 welcomeSection">
            <div class="row">
                <div class="col-8">
                    <div class="text-custom-gray m-1" style="font-size: 5vw"> Hello, I am <span id="nameSpan">Chandler Renteria</span></div>
                    <div class="text-custom-gray  m-1" style="font-size: 5vw"> Full-Stack Developer</div>

                    <div class="d-flex">
                        <a  class="rounded-pill ms-0 mw-25 text-custom-gray neumorphicDefault" href="#portfolio">See My Work</a>
                        <a  class="rounded-pill mw-50 text-custom-gray neumorphicDefault" href="#contact">Start A Conversation</a>  
                    </div>              
                </div>  
                <div class="col welcomeGraphic">
                    <div class="graphic w-100">Placeholder</div>
                </div>
            </div>
        </div>
    </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a bookmark system on an HTML page by utilizing the existing heading tags and implementing Javascript

Looking to implement a bookmark system using the headings within my HTML document, based on heading hierarchy. Unfortunately, my attempts have not been successful so far. https://i.stack.imgur.com/CdXjw.png I envision my bookmarks looking something like t ...

Looking to achieve a stretch-auto-auto column layout in Bootstrap 4 - how can this be done?

Essentially, I am looking for something similar to this: https://i.sstatic.net/ss3Ir.png Can this layout be achieved using columns instead of floats? <div class="clearfix"> <div class="float-left"><button class="rounded btn btn-outline ...

Content width exceeds body width

Having an issue with body width that seems strange. Check out this fiddle link to see for yourself. <div class="topbar" style="width:100%; background:#000; color:#fff"> <div class="container" style="width:970px; margin:0 auto;">Lorem ipsum ...

Maintain the image's aspect ratio by setting the width equal to the height when the height is

I am uncertain if achieving this purely with CSS is possible, but it would be ideal. I currently have an image: <img src="#" class="article-thumb"> CSS: .article-thumb { height: 55%; } Is there a way to set the width equal to the height? My g ...

Steps for creating a one-sided container in CSS

I've created a container class with the following CSS: .container { margin: 0 auto; width: min(90%, 70.5rem); } This setup centers the content on the page within the container, which is great for organization. However, I'm looking to creat ...

Tips for comparing two attributes using Simple HTML DOM libraries

I'm attempting to retrieve a very specific tag using Simple HTML DOM, and I need to check two attributes in order to do this. However, I am unsure of the correct syntax. Currently, my code looks like this: foreach($html->find("ul[class=someclass]" ...

Having trouble with my Angular application, seems to be stuck at the loading screen. Not sure what's causing it, possibly

Hey there, I'm hoping to create a straightforward app that showcases posts. However, I've encountered an issue when deploying the initial page which is stuck on "Loading...". I believe it's a minor problem and would appreciate your assistan ...

Improper headings can prevent Chrome from continuously playing HTML5 audio

Recently, I encountered a peculiar and unlikely issue. I created a custom python server using SimpleHTTPServer, where I had to set my own headers. This server was used to serve .wav files, but I faced an unusual problem. While the files would play in an ...

Footer rises with bootstrap zooming

Hey everyone! I'm a beginner in the world of web development and currently working on creating my own website. I've run into an issue with my footer - I want it to stay fixed at the bottom even when zoomed in, but for some reason, when I zoom in, ...

Creating a CSS class dynamically with AngularJS: A step-by-step guide

I'm working on an Angular JS website that pulls data from an API to create a dynamic CSS class. This class will be used to format other data being displayed on the page. Is there a way for Angular JS $scope data to be generated in the Controller whil ...

Switching between different views in Angular UI-router by selecting one UI-view over another

On my page, I have set up 2 ui-views. The top view contains a form and some controls, while the bottom view initially displays a few tables but should change based on the user's actions in the top view. I chose to keep this initial setup within a sin ...

When updating the HTML content, JavaScript is outputting the code as text instead of running it

I am encountering an issue with adding the body content of a JSON file, which contains HTML code, to my existing HTML. Instead of executing the code, it appears as text within paragraph or header elements. I have searched through various discussions but ha ...

Create a dynamic feature in Bootstrap4 where the navigation bar changes color as the user scrolls to different sections of the

Currently building my personal portfolio website with Bootstrap 4, I came up with a great idea: changing the navigation bar color based on different sections of the website. I attempted to achieve this using JQuery's offset and scrollTop functions, bu ...

How can you achieve three layers of nested quotes in Dynamic HTML?

Working on an app that utilizes JQuery and JQTouch for iOS. The issue I'm facing involves dynamically generated HTML lists where the user clicks a row that needs to be highlighted. However, achieving this has proven tricky due to nesting 3 sets of quo ...

Button with CSS Sprite

These Sprite buttons are making me lose my mind. I'm so close to getting them to work, but not quite there yet. I've been playing around with this really simple sprite image: If you want to see the jsfiddle project, it's available here, bu ...

"What's the best way to update the src attribute of an iFrame when a user clicks

I'm new to coding in PHP or JavaScript, so please bear with me if my question isn't quite right. I'm looking for a way to dynamically pass and embed a URL from a link into the src attribute of an iframe. Essentially, I want users to click o ...

Tips for creating Card-Title responsiveness across various screen dimensions with Bootstrap 4

I'm a beginner in web design and I'm wondering if it's possible to adjust the font-size of the card-title and the size of the card image based on different screen sizes using bootstrap 4. When viewed on small screens, they appear too large. ...

Adjusting the color of an HTML slider button as it moves

In my setup, I have a straightforward slider that I plan to use for controlling the movement of a stepper motor based on the slider's position. I wanted to give the website where this will be hosted a professional look, so I've spent quite some t ...

Converting Beautifulsoup4's findAll() method output of HTML into a list of strings using Python

I'm just starting to explore Python, as I have a project idea in mind that I believe could be achieved by web crawling with Python. Currently following a tutorial series, I know that some consider findAll() to be outdated (I'm not sure why, but ...

This webpage is optimized for all browsers, with the exception of the Android Browser that may display fonts with larger sizes

When developing my webpage, I made sure it was compatible with all major browsers and even optimized it for mobile browsers. However, I overlooked testing the page on Android browser (specifically Android 4.2) and encountered some issues. The viewport set ...