Carousel-item height in Bootstrap 4.6

I am facing an issue with a component in Angular 14 using Bootstrap v4.6:

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100 d-sm-none" src="/assets/headers/unite-header-movil.png" alt="First slide">
        <img class="w-100 logo-header d-none d-sm-block" src="/assets/headers/Pokemon-Unite-main.webp">
        <div class="logo-unite-header row justify-content-center">
          <div class="col-5 col-sm-3 d-none d-sm-block">
              <img class="w-100 logo-header" src="/assets/headers/unite-logo.png">
          </div>
        </div>  
      </div>

      <div class="carousel-item">
        <img class="d-block w-100 d-sm-none" src="/assets/headers/header.jpg" alt="Second slide">
        <img class="d-none w-100 d-sm-block" src="/assets/headers/header-medium-up.jpg" alt="Second slide">
        <div class="logos-header row justify-content-center w-100 m-0">
            <div class="col-5 col-sm-3">
                <img class="w-100 logo-header" src="/assets/headers/pokemon-scarlet-logo-medium-up.webp">
            </div>
            <div class="col-5 col-sm-3">
                <img class="w-100 logo-header" src="/assets/headers/pokemon-violet-logo-medium-up.webp">
            </div>
        </div>
      </div>
      
    </div>
</div>

The .logos-header and .logo-unite-header classes are being adjusted vertically using transform: translateY().

The height of the item-carousel is currently based on their heights, but I would like it to be the same as the image next to these classes.

If I set height: 0 and overflow: visible, the height of .item-carousel adjusts correctly but the elements inside become invisible.

Any help or suggestions would be greatly appreciated! Thank you!

cssangularbootstrap-4carousel

Answer №1

It was actually quite straightforward.

All I had to do was assign a definite value to those particular rows.

An illustration of a lockdown scenario that just requires a composed observation

.logos-header{
    transform: translateY(-150%);
    position: absolute;
}

@media (min-width: 576px) {
    .logos-header{
        transform: translateY(-100%);
        position: absolute;
    }

    .logo-unite-header{
        transform: translateY(-280%);
        position: absolute;
    }
}

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

Selecting the first child within a table using the first-child

I recently set up a login portal page for three different websites. The layout consists of three separate login portals displayed neatly in two columns within a table named "loginPortals". I am currently working on styling the page using CSS, aiming to enh ...

htmlcsscss-selectors

jQuery SlideUp and SlideDown causing Margin Bug in Internet Explorer 7

When clicking the "more info" or "less info" buttons to slide content up or down, a spacing glitch is created in IE7. Using show/hide instead of slideUp/slideDown seems to solve the issue. Is there a way to make sliding work in IE7 without causing this pro ...

javascriptjquerycssslideupslidedown

The issue of font icons not displaying seems to be affecting all users

I have developed my own website that functions similar to fontawesome. However, after uploading it to an online server, I encountered a problem where others are unable to use my custom font icon. In order for someone to utilize the font icon from my websi ...

htmlcss

Learn the process of dynamically loading scripts and their functions in Angular

At first, I had the following code statically placed in Index.html and it was functional. <script src="/le.min.js"></script> <script> LE.init({ token: 'token', region: 'x' }); </script> ...

javascriptangular

Ionic 4 ion-button unable to reflect changes in ngStyle when Variable value is modified

In my Ionic 4 project, I have a page where clicking on a button changes a variable value and updates the ngStyle. There are two buttons, "Friends" and "Families", each meant to have a different background color when selected. Initially, the Friends butto ...

angularionic4

What is the best way to update the value of an input in a child component?

I have two files named person-input.ts and person-input.html What I want to achieve is that when inside the AddPerson function in person-input.ts, I would like to dynamically modify the name-input component by setting [focused]="true" So, the code needs ...

angular

Troubleshooting the error of an undefined RouterModule

Working on implementing lazy loading for my Angular 4 application, I have a total of 18 lazy loaded modules. Upon noticing that fetching these modules is taking some time, I decided to add a loading indicator. Everything worked fine when I added it locally ...

angulartypescriptwebpacklazy-loading

What are the ways to ensure my query columns fill the entire page space?

Currently, when I execute a query, it retrieves the correct information. However, I want to make my columns span across the entire page instead of being centered in the middle with empty space on the sides. Is there a way to expand the columns? Below is t ...

phphtmlcssmultiple-columnsspace

Having trouble receiving a blob response using HttpClient POST request in Angular 9?

I'm encountering an issue while attempting to receive a zip file as a blob from an HTTP POST request. However, the resolved post method overload is not what I expected. const options = { responseType: 'blob' as const }; Observable<Blob ...

angulartypescript

Tips for adding a "Select All" feature to a dropdown list?

Currently, I have a dropdown list with a filter for IN and OUT values. The functionality is working as expected: <select class="form-select" style="max-width: 100px" [ngModel]="selectedBrand" (ngModelChange)="onChangeT ...

javascriptangulartypescript

Struggling with transferring data rows between tables in Angular with Angular Material

I have implemented a data table using angular material with initial data rows. Additionally, I have included an empty data table where rows can be transferred from the first table. Transferring rows from the first table to the second table is functioning ...

angularangular-material

The color of the text on the Homepage appears differently on iOS Safari

At the top of my homepage, I have displayed the company phone number with white text color. It appears correctly as white on my desktop browsers (Firefox and Chrome), also on my Droid phone, but shows up as dark gray on my iOS phone using Safari. Why is th ...

htmlioscsscolorssafari

Gliding over the problem with the Azure line

https://i.sstatic.net/7N3hO.jpg Is there a way to hide the opacity and font on hover? I have tried using outline: 0; in my CSS but there is still a blue line lingering. Any ideas on how to remove it? If you need to see the code and the issue I'm des ...

htmlcss

Running yarn build in react results in CSS modifications

When working in my local development environment, I have everything functioning as intended. However, after executing yarn build, all of my styles appear drastically different. The project was set up using create-react-app and styled with regular CSS. Bel ...

cssreactjscreate-react-appyarnpkg

Is there a way for me to adjust the image dimensions so that it doesn't surpass the width of its parent container?

When working with images, it can be tricky to set the original width while also ensuring it fits within a parent container. For example, if the parent container has a width of 1000px, you may want the image to have a max-width of 100%, but not exceed 1000p ...

javascriptcssimage

Utilizing Agora's Screenshare Feature with Angular 8

I am currently working on integrating Agora into my Angular 8 application. So far, I have been able to successfully join and leave video calls. However, I am facing challenges with integrating screen sharing functionality. According to the Agora official d ...

angularnpmangular8agora.ioagora-web-sdk-ng

Adjusting CSS Div Blocks for Different Screen Sizes

I am currently working on designing a page layout that includes two sidebars and a main article area. My goal is to have the sidebars stack vertically beside the main area when viewed on a tablet or phone, with both eventually moving below it. However, I a ...

htmlcss

Can a FontAwesome icon be used as a button in Bootstrap?

Hi there, I'm trying to use a fontawesome icon as a button in my code. Here is what I have so far: <!DOCTYPE html> <html lang="en"> <head> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" ...

htmlcssbootstrap-4font-awesome

Issue where the background color remains the same and does not change

I'm having trouble identifying the issue in this code. I am attempting to change the background color using the following CSS: body { background-color: black; padding: 0px; margin:0px; height: 1500px; } However, it doesn't seem to ...

htmlcssbackground-colorstatic-pages

Why is it that the changes I make in the parent component do not reflect in my Angular component?

As I embarked on creating a custom select component, I began with the input below: @Input() options: SelectOption<UserRole>[] = []; The parent component (user editor) utilizes this select component and provides the options as shown below: roleOption ...

angulartypescriptangular-components