Is there a way to ensure a div remains responsive when placed inside another responsive div, without relying on media queries?

I'm having trouble creating a responsive square div with another responsive div inside it. No matter what I try, I can't seem to get it right without using media queries. I must be missing something, but I can't figure out what it is.

Here's what I'm aiming for:

https://i.sstatic.net/upLFO.png

Check out my code on Codepen

.image-exists {
        width: 100%;
        padding-bottom: 100%;
        background-size: cover;
        background-position: center;
        background-image: url(https://icatcare.org/app/uploads/2018/07/Finding-homes-for-your-kittens-1.png);
        border: 2px solid #8ABE57;
        border-radius: 0.25rem;
    }

    .cover-image-flag:before {
        content: "Text here";
        position: absolute;
        bottom: 0;
    left:0;
        background: #8ABE57;
        padding: 5px;
    text-align: center;
    font-size: 1em;
    width: 100%;
    }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet"/>   
<div class="col-lg-4 col-md-4 col-sm-5 col-xs-6 col-6 img-holder cover-image-flag">
  <a href="#" class="delete-img-button">
    <i class="fas fa-circle fa-stack-2x delete-img-circle"></i>
    <i class="fas fa-times fa-stack-1x delete-img-icon"></i>
  </a>
  <div class="image-exists"></div>
</div>

htmlcssbootstrap-4responsive

Answer №1

If you want to display an image with text overlaid on top of it, you can achieve this by nesting two div elements inside another div and using the following CSS:

.img-holder {
  background: #8ABE57;
  padding: 4px;
  border-radius: 0.35rem;
}

.image-exists {
        position:relative;
        width: 100%;
        padding-bottom: 100%;
        background-size: cover;
        background-position: center;
        background-image: url(https://icatcare.org/app/uploads/2018/07/Finding-homes-for-your-kittens-1.png);
        
    }
.cover-image-text {  
    text-align: center;
    color: #fff;
    width: 100%;
    background: #8ABE57;
    font-size: 24px;
    position: absolute;
    bottom:0px;
    padding: 1px;
}
<div class="col-12">

<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-2 img-holder cover-image-flag">
  <a href="#" class="delete-img-button">
    <i class="fas fa-circle fa-stack-2x delete-img-circle"></i>
    <i class="fas fa-times fa-stack-1x delete-img-icon"></i>
  </a>
  <div class="image-exists">
    <div class="cover-image-text">Test</div>
  </div>
  
</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

Designing the button outline variant with Material-UI styling

I've recently started using Material UI and I'm facing some difficulties. One of the challenges I'm encountering is with a button component export default function TheButton(props: PropsWithChildren<Props>) { const { className, hover ...

cssreactjsmaterial-ui

What is the reason for being unable to submit the value of an input that is disabled?

When I try to save the value of an input field that is disabled and has the required attribute, I receive an error message stating that "field_name is required". Why am I unable to insert a value when the input field is disabled? <input disabled type=&q ...

javascriptphphtmljquery

Bootstrap icon issue: square displaying instead of the intended icon

I am currently in the process of creating a responsive website using Bootstrap 3. I have successfully downloaded and imported Bootstrap 3 into the root directory of my website. However, I have encountered an issue where the icon does not display correctly ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Encountering a problem with loading the stylesheet

I keep encountering a 404 error when trying to load the CSS in my web application. The HTML content looks like this: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSL Inter App</title> <meta nam ...

htmlcss

Unexpected Visual Basic Web Label Formatting

I am facing an issue with the styling of a complex label. The CSS code doesn't always apply as expected. Interestingly, when I ran this code on two different machines, the styles were inconsistent. The code seems messy and disorganized to me, but al ...

htmlcssasp.netvb.net

Is it possible to extract user-defined keywords from the URL?

Is it possible to implement dynamic functionality like this using PHP on my website (www.mywebsite.com)? If a user types www.mywebsite.com/banana into the URL bar, can my website take the keyword "banana" as input and search for it in a database table? ...

htmlformsurl

Issues with displaying HTML5 audio player in iOS Chrome and Safari browsers

My html5/jquery/php audio player is working well on desktop browsers, but when I tried testing it on iOS, all I could see was a grey track bar. I suspect that the controls are hidden behind the track bar because sometimes the associated file starts playing ...

javascriptjqueryioshtmlaudio

Creating a visually appealing label by customizing it according to the child div

Can the label be styled based on whether the input is checked or not using CSS, or do I have to use JavaScript? <label class="filterButton"> <input name="RunandDrive" type="checkbox" value="1"> </label> ...

javascriptcss

Centered Navigation Bar Aligned with Header

I'm having trouble aligning my header vertically with the text in my nav-bar using Bootstrap 4.6. The nav-bar items are right-aligned, so the text isn't centered in the middle of the page like shown in picture 3. .jumbotron { background: #3 ...

htmlcssbootstrap-4

Using JQUERY to create a smooth sliding transition as images change

Currently, I have set up three images (1.jpg, 2.jpg, 3.jpg) along with an image using the code: <img id="add" src="1.jpg"></img>. The width, height, and position of this additional image are adjusted as needed and are functioning correctly. Fur ...

javascriptjquerycssajaxhtml

The strategy of magnifying and shrinking graphs on Google Finance for better analysis and

I am seeking to understand the logic behind a zoom-able graph similar to the one on Google Finance. I am aware that there are pre-made components available, but I am interested in a simple example that breaks down the underlying logic. ...

javascripthtmlcssajax

Greek symbols do not display correctly in SQL Server when accessed through PHP

At my server database, there is a table with collation set to greek_ci_ai, but I am facing an issue where Greek characters are displaying as question marks(????). I have attempted using header("Content-Type: text/html; charset=iso-8859-7") and <meta ...

phpsql-serverhtml

Retrieving specific HTML data without the need to download the entire webpage

Is there a way to extract data from an HTML table on a webpage without downloading the entire HTML content? In my Delphi XE2 application, I am using TWebBrowser and TEmbeddedWB to load the webpage and then parse the Table element. However, due to the heav ...

htmldelphibrowserextractindy

What's the best way to layer a fixed div over an absolutely positioned div?

I am in the process of developing a small web application. In this project, I have two div elements - one is set to absolute positioning and the other to static positioning. My goal is to position the static div on top of the absolute div, ensuring that it ...

htmlcss

The implementation of modal pop-ups is resulting in unresponsive touch areas on mobile devices and tablets

I recently finished putting together a one-page website using Twitter Bootstrap, based on a theme from Themeforest that I heavily customized. However, when viewing the site on a mobile or tablet, I noticed an issue where the top 2/3 of the page is unrespon ...

phpjquerycsstwitter-bootstrap

Tips for configuring jQtree to initially display the tree structure from the HTML source

Up to this point, I have utilized jQuery TreeView for the navigation menus on my website. However, as the main navigation menu has grown significantly in size (40869 bytes out of 67054 bytes), I am seeking a way to streamline it by using AJAX calls to fetc ...

javascriptjqueryhtmljsonjqtree

Vue.js does not support using nested v-for loops with p tags

I'm facing an issue with nesting 2 v-for loops in Vue.js. It seems simple, but for some reason, it's not working as expected and I can't figure out why. Looping through the users and displaying their names works perfectly. Even extracting t ...

htmlvue.jsvuejs2vue-componentv-for

Utilizing objects from a JSON file within an HTML document

I'm currently in the process of creating a comprehensive to-do list, and I want to establish a JSON file that will link all the items on the list together. Despite my efforts, I find myself uncertain about the exact steps I need to take and the speci ...

javascripthtmlarraysjsonobject

Issues with rendering images in the browser due to CSS inline-block layout are causing

I have encountered an issue with two divs that are set to 50% width and displayed inline-block. Each div contains an image. I expected both divs to stay on the same line, but sometimes the browser breaks the layout. Here is the HTML code snippet: <div ...

htmlcsslayoutbrowserresponsive-design

After adding more rows, the css formatting seems to disappear

After populating flexigrid using a JavaScript method from another .js file, I noticed that the CSS is lost once new rows are inserted. Surprisingly, other sections on the page are not affected. The code snippet I am using is as follows: var newTbl = &apo ...

jquerycssflexigrid