Issue with videos not playing and difficulty navigating through hyperlinks

Here is the link to my webpage (for preview of my code):

I am using Bootstrap 4 for my project.

Everything works fine, but I am facing two small issues with the Cookies Box:

  1. The animation moves from left to right (which is correct) - but then it returns back to the left again (which is incorrect). I want the animation to remain in its final position at the end.
  2. https://ibb.co/pvFzJZZ - The area next to my cookie message is not clickable. It seems like there is a "transparent" overlay that prevents clicking. How can I fix this?

My code:

<div class="d-flex container mt-5 cookies-box">
    <!-- Code snippet -->
</div>

If you need to check my CSS, here is the link:

Any help on how to solve these issues would be greatly appreciated. Thank you!

csstwitter-bootstrapbootstrap-4

Answer №1

Upon inspecting your code, the issue causing the 'transparent background' seems to be the display: flex property. This is because the element with flex in the container tries to occupy the full width of its parent (in this case, the body), resulting in it overlapping the entire width of the body.

Regarding the animation, missing a left value for the cookies box will cause it to return to the beginning of the container once the animation completes, as no left value is specified for positioning.

To align with the animated left: 10%, ensure that matches the CSS definition below:

.cookies-box {
  position: fixed;
  z-index: 1000;
  bottom: 10%;
  max-width: 500px;
  left: 10%;

  -webkit-animation-duration: 3s;
  -webkit-animation-name: slidein;

  /*for firefox*/
  -moz-animation-duration: 3s;
  -moz-animation-name: slidein;

  /* for opera*/
  -o-animation-duration: 3s;
  -o-animation-name: slidein;

  /* Standard syntax*/
  animation-duration: 3s;
  animation-name: slidein;
}

In addition, consider removing the col-md-6 class from your code.

Based on the provided code snippet, your structure looks similar to the one shown below:

...

For further details on using flex properties, refer to this resource!

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

Uniqid in React fails to generate unique IDs

Currently working on creating my first react project and developing a todo list. I have incorporated the uniqid generator into my todo object, but it seems to be returning an empty id rather than a random one. Oddly enough, if I move the todo state outsi ...

javascripthtmlcssreactjs

Conceal the .dropdown-backdrop from bootstrap using solely CSS styling techniques

Is there a way to hide the .dropdown-backdrop element from Bootstrap for a specific dropdown on a webpage using only CSS? I found a solution that involves Javascript, you can view it on JSFiddle here. However, I am hoping to achieve this without relying o ...

javascriptcsstwitter-bootstraptwitter-bootstrap-3

Multiple images overlapping each other in a dynamic parallax effect

Despite my fear of receiving down votes, I have been unsuccessful in finding the answer to my question so I will proceed with asking it. I am attempting to replicate a parallax effect similar to the one showcased on this website, particularly the image of ...

jqueryhtmlcss

Creating a list of font sizes for each <p> tag in my HTML document

I am looking to create an array containing the font sizes of all the p tags in my HTML document. How can I specifically target only the p elements and not their parent elements? ...

javascripthtmlcss

Within a container, there are two divs separated by a white bar

Hello everyone, I am in need of creating a unique slideshow for my website and I want to start by splitting a div into two sections using a slightly skewed diagonal line that is either semi-transparent black or solid white. I have searched extensively onli ...

htmlcss

Tips for adjusting the position of a primefaces p:confirmDialog

I am facing an issue with adjusting the distance between my confirmDialog and the top of the page when it is displayed within an iframe. I attempted to modify my CSS settings, but unfortunately, it did not have the desired effect. <p:confirmDialog glob ...

cssprimefaces

Is there a way to smoothly scroll while resizing a div using Resizable Jquery?

I've implemented AdminLTE 3 template and added a resizable div using jQuery-UI. When I expand the div's height, the page doesn't automatically scroll down with it. I don't want to add a scrollbar to the div; instead, I want the entire p ...

phpjqueryhtmlcssjquery-ui

What is the proper application of counter-reset when utilizing CSS counters to automatically number headings?

In my quest to automatically number headings with multiple levels of hierarchy in an HTML document using CSS, I have encountered various examples online that heavily rely on counter-reset. However, despite testing it in different configurations, I haven&ap ...

htmlcsscss-counter

Framework designed to be compatible with Internet Explorer 7 for seamless

Is there a CSS framework that provides full support for IE7 without any issues? Specifically, something similar to Twitter Bootstrap but with guaranteed rounded corners and properly functioning tabs. I have experienced problems with the Popover plugin sp ...

cssinternet-explorer-7css-frameworks

The CSS styling for changing the color of a button in React JS is not

Creating a custom css style in mypagestyle.styl with the following properties: :local .mybutton border-radius: 1px; padding: 2px; margin: 2px; font-size: 14px; text-align: center; background-color: #4582ec; color: #fff; All styles are being ...

cssreactjsbootstrap-4react-bootstrap

Using a function within a map in SCSS looping

Forgive me if this question sounds trivial, but I am curious if it is achievable to generate a series of functions using a loop within a map in SCSS. The code snippet below unfortunately does not yield the desired outcome, however, it illustrates what I a ...

csssass

Need assistance with a coin flip using HTML and Javascript?

After spending hours trying to make the code work with the example provided, I find myself unable to get it functioning correctly. Is there anyone who can assist me in putting all of this together so that it runs smoothly? var result,userchoice; functio ...

javascriptjqueryhtmlcss

Is there a way to trigger a modal popup when hovering over a Bootstrap 5 card?

After coming across a handy template online, I decided to implement a modal pop-up feature when hovering over cards using Bootstrap 5. Here's what I have so far: class SavedEpisodes extends Component { $(function() { $('[data-toggle=&qu ...

javascripthtmlcssreactjsbootstrap-5

Guide on creating a menu that remains open continuously through mouse hovering until the user chooses an option from the menu

I have a unique scenario where I am working with two images. When the mouse hovers over each image, two corresponding menu bars appear. However, the issue is that when the mouse moves away from the images, the menu disappears. Any suggestions on how to im ...

javascriptjqueryhtmlcss

The background of the ACTK Modal Popup vanishes after multiple instances of scrolling up and down

The issue I'm facing is with the AJAX Control ToolKit Modal Popup's background (the blind curtain) disappearing after scrolling up and down several times. I have attempted to resolve this by applying various CSS styles, but unfortunately, none of ...

asp.netcssasp.net-ajaxajaxcontroltoolkitmodalpopupextender

Is BEM mandating the creation of superfluous elements?

<header> <a href="#"><img src="kitty.jpg" /></a> ... </header> In the context of organizing for BEM, take this example within the header section that is not dependent on the header block. To adhere to BEM guidelines, I op ...

htmlcssbem

Is it possible for a media query to target only 2 elements instead of all 3?

Currently, I am dealing with an older website for a client, and it appears that a media query is not correctly affecting three specific classes out of the total. These problematic classes are .free-ship, .wholesale, .chronicles The CSS styling for these c ...

htmlcssjoomla

Updating the active navbar link with JavaScript in ASP.NET Core Razor Pages

When navigating through my Razor Pages, I need to dynamically change the color of the navbar links. I attempted using JavaScript, but encountered issues with the pages getting rerendered each time, preventing me from toggling the elements. Here's wha ...

javascriptasp.net-corebootstrap-4razor-pages

Tips for including a background image using the :after pseudo-element in Angular 2

I'm facing a challenge with passing a URL image from my HTML to my CSS in Angular, and I can't seem to figure it out: Here is a snippet of my CSS: card-profile_visual { height: $visual-height; overflow: hidden; position: relat ...

javascriptcssangularsass

The comparison between Bootstrap 4 collapsible and expanded menus

Forgive me if this question has already been asked (I'm still new to all of this and learning, finding the answer in search is challenging). I'm attempting to create a collapsible navbar that, when expanded, displays items separated by a "|" sym ...

htmlcssbootstrap-4navbar