The text in the image caption has been drastically reduced along with the size of the image

Currently, I am dealing with the following code:

<div style="min-width: 1000px;">
    <p>
        Some text
    </p>
    <div class='div_img_left'>
        <img src="images/sth.png" alt="missing image" style="max-width: 100%;">
        <footer>My caption</footer>
    </div>
</div>


.div_img_left {
    max-width: 50%;
    float: left;
    margin-right: 30px;
    margin-bottom: 2em;
    text-align: center;    
}

While this design works well on my computer screen, it presents issues when viewed on my mobile device. The main problem arises from the fact that my phone's screen width is not 1000px, causing elements to shrink. Specifically, the text "Some text" remains readable, but "My caption" shrinks excessively. How can I address this issue?

I have attempted various geometrical constraints such as using percentages or min-height, but none have provided a satisfactory solution.

htmlcss

Answer №1

To create a responsive site, utilize media queries and avoid setting large min-width. Instead, consider using vw for width.

.div_img_left {
  max-width: 50vw;
  float: left;
  margin-right: 30px;
  margin-bottom: 2em;
  text-align: center;
  
}
figcaption {
  font-size: 1em;
  line-height: 1.3;
  text-align: center;
}
@media (max-width: 500px) {
  figcaption {
    font-size: 14px;
    line-height: 1
    min-width: 100%;
  }
  figure {
    min-width: 100vw;
  }
}
<div style="width: 100%;">
  <!--changed from min-width: 1000px-->
  <p>
    Some text
  </p>
  <figure class='div_img_left'>
    <img src="http://placehold.it/150x200/eea/e00?text=150x200" alt="missing image" style="max-width: 100%;">
    <figcaption>My caption</figcaption>
  </figure>
</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

Input form with multiple fields. Automatically display or hide labels based on whether each field is populated or empty

I am attempting to create a form where the placeholders move to the top of the input when it is focused or filled. However, I have encountered an issue with having multiple inputs on the same page. Currently, my JavaScript code affects all inputs on the pa ...

javascripthtmljquerycssplaceholder

Tips for preventing event propagation while clicking on a swiper.js image next/prev button within a bootstrap card

I have integrated ngx-swiper-wrapper within a bootstrap card as shown below, with a routerlink at the top. When I click anywhere on the card, it successfully routes to the designated page. However, I am facing an issue where I want to prevent routing if a ...

htmlangulartypescriptswiper.jsngx-swiper-wrapper

When you hover over them, chips transform their color

I am currently using a chip in my code and I would like to change its color when the mouse hovers over it. I attempted to achieve this by using: hover:{ backgroundColor: 'red', } In addition, I incorporated const StyledChip ...

javascriptcssreactjsmaterial-ui

What methods can be used to customize the font and background color of a website for different user groups?

Trying to incorporate a template into my project. My client has requested the following: The regular user area should feature a blue background. The professional user area should have an orange background. Is there a way to set up a condition to change ...

javascriptjqueryhtmlcsssass

Resolving the issue of nested modals within Bootstrap

I am experiencing some issues with my customer visits list page. When I try to add a visit, it opens a bootstrap popup ("#Pop1") to record the visit details. Within this modal, there is an option to add a new customer on the spot, which then triggers anoth ...

javascriptjquerycsstwitter-bootstrapmodal-dialog

Aligning variable width numbers within a div container

Currently experimenting with CSS to create a calendar design that mimics the look of a traditional paper calendar. One issue I've encountered is the alignment of numbers within boxes, especially when dealing with double digits. When displaying a sing ...

htmlcss

spill the elements from one div into another div

I'm facing a situation where I have 2 divs on a page, with the first div containing text content only. The issue is that when the content of the first div overflows, it gets cut off due to the CSS applied to it: .one { overflow: hidden; width: 1 ...

javascriptjqueryhtmlcss

Adding dynamic content to CSS in Next.JS can be achieved by utilizing CSS-in-JS

Currently diving into the world of Next.JS, I've managed to grasp the concept of using getStaticProps to retrieve dynamic data from a headless CMS and integrate it into my JSX templates. However, I'm unsure about how to utilize this dynamic conte ...

cssnext.js

A Step-by-Step Guide on Adding Content After the Bootstrap Slider Using Absolute Position

Check out my project here: I'm currently working on a bootstrap carousel that has absolute positioning and a z-index of -1. However, I'm facing an issue where I can't figure out how to place a div right after the carousel. I've tried s ...

jqueryhtmlcsstwitter-bootstrapcarousel

Utilize HTML to place text above an image within a TextView

While working with a list of Strings that I add to TextViews individually, I encounter an issue with displaying images alongside the text. The HTML format allows me to include images within the text, but currently, the image appears below the text instea ...

javaandroidhtml

Change to a dark theme using React hooks in typescript

Hello, I am new to React and English is not my first language, so please excuse any mistakes. I have been trying to enable a dark mode feature on my website. Most examples I have found involve toggling between dark and light modes where you need to specify ...

javascriptcssreactjstypescript

How can I easily add both horizontal and vertical arrows to components in React?

Creating a horizontal line is as simple as using the following code: <hr style={{ width: "80%", border: "1px solid black" }} /> You can customize the width, length, and other properties as needed. If you want to display an arrow ...

javascriptcssreactjssvg

Unusual shadow cast by the box's silhouette

I am currently facing an issue with a box and its shadow. When I close the box, a different shadow lingers behind. I have tried troubleshooting this problem but cannot pinpoint the source. I have included the relevant code files in the specified folders. I ...

javascripthtmlcss

The script functions perfectly in jsfiddle, yet encounters issues when used in an HTML

I stumbled upon a seemingly peculiar issue with my script in jsfiddle: https://jsfiddle.net/oxw4e5yh/ Interestingly, the same script does not seem to work when embedded in an HTML document: <!DOCTYPE html> <html lang="en"> <head> & ...

javascriptjqueryhtmlcss

Ionic directive ng-disabled not functioning as expected

Upon running the Ionic application, I noticed that the radio button is not being disabled even with the use of ng-hide.<input type="radio" ng-disabled="true"> ...

htmlangularjsionic-framework

What is the process for assigning a CSS class to a div element that is generated by react's render() function?

In React, I am encountering an issue where the css class I want to set on the div returned from render is being removed. This problem even persists when I try nesting another div inside the first one and setting the class on the enclosed div. Has anyone ...

cssreactjs

The CSS linear gradients rainbow wheel is missing a few sections, only displaying part of its 12

I've almost got everything working, but I'm facing a challenge in displaying all 12 sections of the rainbow wheel. I know it's probably something very simple (Occam's razor). I've been following this amazing tutorial on CSS linear ...

htmlcss

The loading feature of jQuery UI Autocomplete - .ui-autocomplete-loading is ingenious

When fetching the XML file for the search box, I would like to apply this css. It currently takes around 3 seconds to load the file. In the autocomplete.js file, I found these two functions: _search: function( value ) { this.term = this.element ...

jquerycssjquery-uiautocomplete

Ways to create animation solely using CSS for a div element

After spending hours searching for solutions, I still haven't found the perfect answer without using JQuery. I am attempting to add a slide-up animation effect to my divs. I have tried numerous options, including the simplest one: transition: all li ...

htmlcssangularjsanimation

Having trouble with the Tailwind transition in my Next.js component

I'm facing an issue with the ease out transition not working as expected. I need the side to slide in from left to right with a duration of 500ms. Despite trying various solutions, I can't seem to figure out why it's not functioning properly ...

cssnext.jstailwind-csstailwind-ui