When the hero banner text is too long, dynamic generation will insert it below the 3 action cards to prevent overlap, incorporating styling to maintain clarity and organization

I am encountering an issue with my dynamically generated hero banner. The issue arises when the body text of the banner is longer than usual, causing it to run behind the action cards positioned at the bottom of the banner.

Here is a visual representation of the problem:

https://i.sstatic.net/9i5h4.jpg

I have tried adjusting the margin-bottom for the HeroText element, but it did not solve the issue. I am attempting to modify the CardRow and HeroText elements so that the CardRow adjusts its position based on the length of the text while still overlapping the HeroImage at the bottom. However, I am struggling to find a solution for this.

Please refer to the following CodeSandbox link for reference:

https://codesandbox.io/s/wonderful-wright-tmgnu?fontsize=14&hidenavigation=1&theme=dark

Additionally, here is all of my code:

(insert modified code here)

EDIT I attempted to remove the negative margin property and added position: relative, but it resulted in losing the desired overlay effect of the card row at the bottom: https://i.sstatic.net/CPd4e.jpg

javascriptcssreactjsstyled-components

Answer №1

After closely examining the code, I discovered that the cards had a negative margin property.

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

Take a look at the structure for reference.

  1. The container for the cards is shifted when the dynamic description is added.
  2. To fix this issue, I recommend adding position: relative; and removing the margin: -(value); from the same element.

I hope this explanation clears things up for you.

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

Display a pop-up window when hovering over a table cell using HTML and JavaScript

I am currently developing a JavaScript application and came across a helpful library called qtip2. My objective is to have different information displayed when the user hovers over each cell in the table. The qtip2 library I mentioned earlier can display ...

javascripthtmlcss

Updating the appearance of tabs in React Native Navigation dynamically during runtime

I am currently working with the startTabBasedApp API, which includes three tabs in my app. I have a requirement to change the background color of the tabBar for specific screens dynamically. Is it possible to achieve this at runtime? For instance: Scree ...

javascriptreact-nativereact-native-navigation

What is the best way to delete spaces between span elements while preserving the spaces within each individual span tag?

Is there a way to eliminate unexpected spaces that appear between spans? One attempt was made by setting font-size: 0 within the wrapper <div>, which successfully removed spaces not only between <span> tags but also within each <span> ta ...

htmlcssvue.jsvuejs2

Executing a jQuery post request without utilizing AJAX or a form

Is there a method in jquery to perform a post submission without using a form? For example, can I utilize the function $.post("script.php",{var1:"abc", var2: "cde"}) in a way that rather than running in the background, it will actually submit the values ...

javascriptjqueryformssubmit

Choose elements that are not contained within a certain designated element

I am looking to choose one or more elements that are NOT children of a specific element. <html> <body> <div> <p> <b> <i> don't pick me </i> </b> ...

javascriptangularjsselenium-webdrivercss-selectorsjqlite

Properties for a standard React component

Currently, I am developing a form component in react with typescript that requires a 'fieldStructures' and an 'onSubmit' prop. type FieldStructure { type: 'text'; name: string; label?: string; helpText?: string ...

reactjstypescripttypescript-genericsreact-component

Patience is key when using JavaScript

I have a JavaScript function that is responsible for updating my data. When the user clicks multiple times, I need to wait for the second click until the first one has finished processing, and so on. $scope.isLastUpdateFinished = true; $ ...

javascriptjqueryangularjs

Why do images show up on Chrome and Mozilla but not on IE?

I have tested the code below. The images display in Chrome and Mozilla, but not in IE. The image format is .jpg. Can someone please assist? bodycontent+='<tr class="span12"><td class="span12"><div class="span12"><img class="span ...

javascriptjqueryhtmlcssjsp

Challenges faced with ajax requests in developing a JavaScript widget API for external websites (such as ShareThis, UserVoice, etc.)

I am in the process of developing a JavaScript file for a widget that will be embedded on third-party websites (similar to ShareThis, UserVoice, Google Analytics, etc). If the JavaScript file is hosted at api.myservice.com/js/foo.js and a third-party site ...

javascriptjqueryajaxapi

Tips for transforming a hover menu into a clickable menu

The scenario above demonstrates that when hovering over the dropdown menu, it displays a submenu. However, I want the submenu to be displayed after clicking on the dropdown text. Could anyone provide assistance on how to change the hovermenu to a clickabl ...

javascripthtmlcss

Executing a jQuery event after a div's background-image has finished rendering

Greetings and thank you for sparing a moment. I'm curious to know if there exists a method through jQuery to execute a function immediately after a background image in a div has completed downloading and rendering. Imagine you have the following div ...

javascriptjqueryhtmlcss

Could a JavaScript function be called asynchronously in a Java class that extends org.apache.cordova.CordobaPlugin.java?

I am working on an Ionic application that includes a custom class extending org.apache.cordova.CordovaPlugin to assist with background tasks. I am looking for a way to send asynchronous events from the Java side to the Ionic side of the app. Is there a m ...

javascriptandroidangularjscordovacordova-plugins

Disabling the outline border on bootstrap select elements

I have integrated this plugin into my project and I am attempting to eliminate the blue border when the select box is focused. I attempted to achieve this by setting the outline to none using the following code: *:focus { outline: 0!important; } Additi ...

htmlcsstwitter-bootstrap

Modifying Parent Component Layout Using Vue.js

I am currently in the process of converting a UI element into a component for the purpose of reuse. This particular element consists of two buttons that toggle the visibility of two DOM elements within the parent app. The state of these buttons is stored i ...

javascriptvue.jsvue-component

How to apply CSS styling to all class instances except for the selected ones

Imagine you have an application with numerous instances of a class called .element. What if we could achieve the following effect: .element:hover rest { opacity: 0.5 } In this scenario, "rest" would represent all other instances of .element except fo ...

htmlcss

Observable in RxJS with a dynamic interval

Trying to figure out how to dynamically change the interval of an observable that is supposed to perform an action every X seconds has been quite challenging. It seems that Observables cannot be redefined once they are set, so simply trying to redefine the ...

javascripttypescriptrxjs

What is the Most Effective Way to Arrange an Array of Objects Based on Property or Method?

Looking for ways to enhance my array sorting function, which currently sorts by property or method value. The existing code is functional, but I believe there's room for improvement due to redundant sections. optimizeSort(array: any, field: string): ...

javascriptarraystypescriptsorting

Stop the annoying automatic page refreshing in your Angular single-page application

My Angular routing is set up with HTML5 mode in the following way: app.config($routeProvider, $locationProvider){ $locationProvider.html5Mode(true); $routeProvider.when("/", { templateUrl: "/views/login.html" }).when("/dashboard", { templa ...

javascripthtmlangularjs

Exploring the integration of polyfills and the jQuery package in Next.js

Encountering a problem related to the Next.js array-flat polyfill. It is essential for me to have compatibility with older versions of Chrome, specifically in the range from v60 to v68. The project I am currently working on utilizes a video player library ...

javascriptreactjsnext.jspolyfills

Forwarding based on URL/Query Parameters

I'm looking to create a redirect for users based on URL or query parameters, but I'm not sure how to go about it. For example, if the URL is https://www.tamoghnak.tk/redirect?link=https://www.tamoghnak.tk/gobob, I want to redirect to /gobob. If ...

javascripthtmlnode.jsurl-parametersquery-string