Mobile-friendly logo displayed on top of an image carousel

My carousel is working well using HTML Bootstrap. I am trying to add small centered logo images over the carousel images and make them responsive on different devices. Additionally, I attempted to add a button under the logo and have it centered as well. However, in the code below, it's not behaving as expected.

.carousel-caption {
    top: 20px !important;
    right: 20px !important;
}
.carousel-caption {
  position: absolute !important;
  top: 50% !important;
  /* left: 50% !important;
  transform: translate( -50%, -50%) !important; */
  text-align: center !important;
  color: white !important;
  margin: auto;
  font-weight: bold !important;
  max-width: 500px !important;
  background-repeat: no-repeat !important;
}

.carousel-caption img {
  max-width: 150px !important;
}
<div class="container-fluid main">

        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>

            </ol>

            <div class="carousel-inner">
                <div class="carousel-item">
                    <img class="d-block w-300 " src="assets/images/dgWebsiteImages26.jpg" 
                        alt="First Image">

                        <div class="carousel-caption">
                         
                                <img class="" src="assets/images/logo---27.png" style="background-repeat: no-repeat;"
                        alt="First Image">
                        <a class="ripple rbutton" href="https://">A Button</a>
                      
                            
                        </div>

                </div>
        
            </div>
    
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div> 
    

    </div>

htmlcssbootstrap-4

Answer №1

It appears that this adjustment may meet your requirements. I have slightly reduced the size of the VW logo in order to enhance its visibility within the code snippet. Remember, when positioning an element with a position absolute attribute inside another element, ensure that the parent of the absolute element has a position relative property. Additionally, the carousel-item's width was set to 100% even though the image was not, so by including a width: fit-content, it functioned as expected. If you wish to position it at one of the corners like bottom or right, modify the following:

.carousel-caption {
    top: 20px;
    right: 20px;
}


.carousel-item {
  position: relative;
  width: fit-content;
}

.carousel-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate( -50%, -50%);
  text-align: center;
  color: white;
  font-weight: bold;
  background-repeat: no-repeat;
}

.carousel-caption-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

button {
  width: 40px;
}

.carousel-caption img {
  max-width: 50px;
}
<div class="container-fluid main">

  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
    </ol>

    <div class="carousel-inner">
      <div class="carousel-item">
        <img class="d-block w-100 " src="https://images.unsplash.com/photo-1504736038806-94bd1115084e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=3d045bbf1ecc01c4c9ec011ce5c8977d" alt="First Image">

        <div class="carousel-caption d-md-block">
        <div class="carousel-caption-inner">
          <img class="" src="https://images.unsplash.com/photo-1599305445671-ac291c95aaa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1469&q=80" style="background-repeat: no-repeat;" alt="First Image">
          <button>test</button>
          </div>
        </div>

      </div>
    </div>

    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </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

How to Resolve File Paths in CSS Using Angular 7 CLI

My assets folder contains an image named toolbar-bg.svg, and I am attempting to use it as the background image for an element. When I use background: url('assets/toolbar-bg.svg'), the build fails because postcss is unable to resolve the file. How ...

cssangularsasscommand-line-interfaceassets

Sliding between divs made easy with our Div slider tool. Easily set a timer for

I've successfully implemented a div slider which can be viewed here: http://jsfiddle.net/UqSFr/2/ The main functionality of the slider is as follows: $("#NextButton").click(function(e) { e.preventDefault(); if ( $("#h_wrapper").is(':not(:anima ...

jqueryhtmltimerslider

Is there a way to extract the visible text from an HTML TextNode without including the HTML tags?

My current challenge involves converting a DOM node and all of its children into plain text markup of a custom design. Utilizing node.childNodes allows me to retrieve a list of all content, which can then be recursively transformed into my desired string f ...

javascripthtmldomxmlnode

Utilizing External Libraries Added Through <script> Tags in React

My goal is to develop a Facebook Instant HTML5 application in React. Following their Quick Start guide, Facebook requires the installation of their SDK using a script tag: <script src="https://connect.facebook.net/en_US/fbinstant.6.3.js"></scrip ...

javascripthtmlreactjstypescriptfacebook-instant-games

"Exploring the World of Mobile Development and Screen Size

Currently, I am in the process of creating a basic mobile website that can be accessed through a QR code leading to the page linked below. However, I have encountered an issue where viewing it on my Android or Apple phone results in excess width. Any advic ...

htmlcssmobilecross-browser

Can Anyone Provide Assistance with CSS for Customizing the Bootstrap 4 Navbar Burger Icon

I am working on implementing a bootstrap 4 navbar into my Angular code base. When the screen size of the browser becomes smaller, I want to hide the navbar and instead display a hamburger icon with a side menu. I have tried a few solutions, but have not b ...

cssangularbootstrap-4navbarhamburger-menu

Is there a way to stop my <pre> code from being displayed on the page?

Currently, I am utilizing the google code prettifier found at http://code.google.com/p/google-code-prettify/ This tool functions similarly to stack overflow by enhancing and highlighting syntax when a block of code is input. However, I have encountered a ...

javascripthtmlpretty-printprettify

How can jQuery determine if multiple selectors are disabled and return true?

I am currently working on a form in which all fields are disabled except for the "textarea" field. The goal is to enable the "valid" button when the user types anything into the textarea while keeping all other inputs disabled. I initially attempted using ...

javascripthtmljqueryforms

What is the best way to continuously add items to a div until their heights are equal?

In my layout, I have two divs positioned next to each other. Typically, the left div displays n+2 items while the right div displays n items. The value of n changes depending on the category and is already set. However, there are instances where certain ...

javascriptjquerycssajax

CSS disappears after selecting menu in JSF application with PrimeFaces

Whenever I click on a p:menuitem and update the content of a layoutunit, the CSS style of the layoutunit disappears. Strangely, when I refresh the page, the style magically reappears. Can anyone explain why this happens? <p:layout id="plantillaPrincipa ...

javacssjsflayoutprimefaces

The issue with HTML5 video tags on iPhone Safari is that 'a' links are not functioning correctly

For my mobile website in Safari browser, I am utilizing the html5 video tag. While the video is functioning properly, I have encountered an issue with 'a' links overlapping on top of the video. These links have been added using absolute positioni ...

iphoneioshtmlhtml5-video

What steps can I take to make my search button work with this JavaScript code?

I am struggling with integrating my custom search bar with a JavaScript code to make it functional. Here is the code snippet for the Search Button: document.getElementById('searchform').onsubmit = function() { window.location = 'http:/ ...

javascripthtmlgoogle-search

Using jQuery to insert a <li> element doesn't seem to be functioning as expected

Here is a snippet of code that I'm trying to work with: <ul class="vertical-tabs-list"> <li class="vertical-tab-button first selected">blah</li> <li class="vertical-tab-button">blah</li> </ul> I am attempting ...

javascriptjqueryhtml

Alter the div's HTML content once the Ajax operation is completed

I have a div element that looks like this: <div class="progress" id="progress-bar"></div> I am using the following JavaScript code along with an ajax call to retrieve some data. The data returned is 0, however, the content is not being added ...

javascriptjquerycssajaxtwitter-bootstrap

Is there a table that allows users to input percentages?

Looking for help with a table that has 2 columns: "Activities" and "Average % of Time". Users need to input a % value for each activity in the "Average % of Time" column. There are 7 rows for activities. The goal is to ensure that the sum of the % values f ...

javascripthtml

Issue with a Bootstrap panel displaying incorrect border formatting

I am currently working with Angular UI Bootstrap and facing an issue with an accordion component. Everything works perfectly fine in the development environment with the full version of the Bootstrap Cerulean file. However, when I minify the CSS file for p ...

htmlcssangularjstwitter-bootstrap

When a table row is selected, set the OnClick attribute of an input to the value of the TD cell in that row based on

I'm really struggling with this. So, here's the issue - I have a table where rows get assigned a class (selected) when clicked on. Now, there's an input inside a form that needs to redirect to another page when clicked, and it also needs t ...

javascriptjqueryhtmlonclick

Activate the parent navigation link when on sub-pages

I want to ensure that the parent navigation item is highlighted when a user is on a child page based on the URL. For example, if the user is currently viewing foo1-child and the parent is foo1, I need to apply the active class to Foo 1: http://foo.com/foo ...

javascriptjqueryhtmlcss

The process of embedding one script into another script is underway

I've been struggling to optimize the loading of a responsive/mobile page, but then I came across a jQuery plugin that dynamically toggles elements based on screen width. This seemed like the perfect solution as it eliminates the need for extra HTTP re ...

javascriptjqueryhtml

Performing addition and multiplication operations on separate identifiers with the help of Jquery

Currently, I am working on developing a shopping cart website and I am new to using Jquery. My layout involves the need to increment and decrement values by one when the plus and minus button is pressed. Additionally, the total price value should also be a ...

jqueryhtmlcss