Exploring the elimination of box shadow on elements that overlap

view image hereI'm experiencing an issue with my HTML code where a box shadow appears in the mobile view. Despite my efforts, I cannot seem to remove it. This problem only arises in the mobile view, leading me to believe that it may be related to how I am positioning the text.

The HTML code is as follows:

<div class="b">t</div>
<div class="c">n</div>
<div class="d">a</div>
<div class="e">t</div>
<div class="f">l</div>
<div class="g">u</div>
<div class="h">s</div>
<div class="i">n</div>
<div class="j">o</div>
<div class="k">c</div>
<div class="l">n</div>
<div class="m">g</div>
<div class="n">i</div>
<div class="o">s</div>
<div class="p">e</div>
<div class="q">d</div>
</div>

Additionally,

    </div><div id="text-7" class="widget widget_text">          <div class="textwidget"><div class="line-down">

I attempted to modify the ID's CSS with the following code:

#text-7 {box-shadow: none} 

Unfortunately, this solution did not work as intended.

You can visit here

I have also created a Codepen example, but I have been unable to reproduce the issue https://codepen.io/adsler/pen/rXoNGJ

Answer №1

The shadow effect on the box is due to this specific CSS rule

.n {box-shadow: 0px 0px 10px #808080;}

I recommend either removing or overriding it with a more targeted CSS style

body .n {box-shadow: none;}

Alternatively, you can include it inline:

<div style="box-shadow:none;" class="n">i</div>

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

By the way, @mertcanb is correct, your HTML code needs some cleaning up ;)

Answer №2

There is an appearance of

.n {box-shadow: 0px 0px 10px #808080;}
in your css responsible for the box-shadow effect. Locate it by using CTRL+F in your css file.

Try considering alternatives like svg or other formats instead of relying solely on divs to create complex illustrations. The nesting can become messy and difficult to manage.

Cheers!

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

Customizing Text Placement in HTML Lists with CSS List-Style-Image

Is there a way to adjust the vertical positioning of the "Blahs" in the list so that they appear closer to the center of each list bullet in the image displayed on my HTML code below? Here is the snippet of code: <html> <style> li { margin-to ...

Perform time update every second

Is it feasible to have my timeupdate function run every second? (Using VUE CLI) @timeupdate="videoSecond" videoSecond(){ let Second = this.player.currentTime(); let CaptureList = this.capturesList; CaptureList.forEach(element => ...

Exploring the concept of overflow and minmax behavior in CSS grid

Summary: Example of overflow in nested grid layout on Codepen, and attempts to fix it using CSS grid-template-columns: repeat(16, minmax(0,1fr)); Within the element called container, there are two main elements - summary-wrapper and stats-wrapper The gri ...

How can I make a bootstrap container maximize the available viewport space?

I've come across several similar posts, but none seem to address my particular dilemma. My challenge lies in presenting a table at the end of a bootstrap grid: <div class="container-fluid"> <!-- Various rows with different size ...

Trouble with displaying vertical scroll bar in React app when height is set to 100%

I am developing a React application where I need the content to always occupy at least 100% of the height to style the background accordingly. I have attempted to achieve this by setting the CSS height to 100% at the top level, which works fine. However, t ...

Clicking on tabs causes their content to mysteriously vanish

I am working on creating a dynamic menu using jQuery that switches content based on tabs. However, I am facing an issue where clicking on a different <li> item causes the content to disappear. Each list item should correspond to different content sec ...

Having issues with object-fit: cover not functioning properly in Safari browser

Encountering a browser support issue at the moment. Everything is functioning as expected on Firefox and Chrome, but Safari is causing problems with images. Currently, the image size is set using "object-fit: cover" and working properly on Chrome/Firefox. ...

Tips on creating a horizontal scrolling effect using the mouse

Is there a way to enable horizontal scrolling by holding down the mouse click, instead of relying on the horizontal scroll bar? And if possible, can the scroll bar be hidden? In essence, I am looking to replicate the functionality of the horizontal scroll ...

Steps for breaking down a given string into divisions that correspond to an A4 sheet

Within my content, there are various styles applied. For example: This is a <b>bolded</b> word. I am seeking a solution to divide this long string into smaller sections that would fit on an A4 page accurately. The goal is to maintain the integ ...

Modifying the appearance and behavior of an element dynamically as the page is being loaded using AngularJS

Struggling with a challenge for two days now, I have attempted to implement a panel-box using bootstrap and AngularJS. Within the confines of a controller, my code looks like this: <div id="menu2a"> <div class="panel list-group"> <div ...

By combining TCPDF with basic HTML, you can easily generate a detailed table of contents

Is there a way to generate a table of contents when printing HTML to PDF using TCPDF? Here is an example code snippet: $html = '<h1>Hello</h1> How are you? <h2>Answer</h2> I am well, thanks'; // ... etc. Long HTML documen ...

Pictures are not appearing correctly when utilizing the img-fluid class

Issues occur when I apply the "img-fluid" bootstrap class to my images, as they fail to appear on the page and are set at 0x0 pixels in size upon inspection. This is the HTML code: <div class="col"> <div class="row no-gutters"> &l ...

Deactivate zoom on the viewport and display the entire page

Hello, I am currently working on my website www.ecogo.io and I am trying to get the entire page to display instead of just a portion. However, I am encountering an issue where the page loads zoomed in on mobile browsers like Chrome for Android, whether Des ...

Prevent an interruption in the flow of content by keeping the line unbroken

Having an issue with a visible line break between the content of an HTML element and its :after content. The problem arises in a sortable table where a small arrow is displayed at the top. To view the problem, check out this fiddle http://jsfiddle.net/ceu ...

How to style Angular Material Dropdowns: Trimming the Left and Right Sides using CSS

Seeking to customize Angular Material Select to resemble a basic dropdown. Even after applying the disableOptionCentering, the dropdown list options still expand from the left and right sides (refer to Current picture below). The desired look would involve ...

Transitioning CSS for transformative text effects

Is there a way to create an effect similar to the "HOVER ME" animation on a div? I want the text to move down and another text to appear from above when hovering over the div, without separate letters. The transition should be seamless and reversed when th ...

Troubleshooting issues with Bootstrap's responsiveness configuration

I've been working on creating a responsive user login page using Angular 5. It looks great on full-screen display. https://i.sstatic.net/YQrL5.png However, when I resize the browser window, the responsiveness seems to break. https://i.sstatic.net/4 ...

Tips for displaying a close icon after completing a file upload

I need to implement a feature where once a user uploads a file, a cross sign should be enabled on the file. I attempted to use javascript for this functionality, but it seems to not be working as expected. There are more than 8-10 different file types that ...

What's the best way to add two distinct colors as background for a header with css?

h2 {background-color:#C61236; color:#FFFFFF; font-size:medium; line-height:1.5; text-indent:20px;} Although the current setup looks good, I am looking to incorporate a new color block at the start of the text. I'm not sure what steps to take nex ...

Exploring the world of CSS and designing layouts using multiple div elements

Upon reviewing this website, I must admit it is getting close to what I envision. However, being a perfectionist and new to HTML and CSS, I find myself struggling to achieve the desired outcome. The layout consists of two divs named topred and top yellow, ...