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

Center flex items along the vertical axis

IMAGE <div className="d-flex align-items-center"> <img src={member.user_profile_image} width="41" height="41" alt="" ...

htmlcsstwitter-bootstrapbootstrap-5

Can anyone recommend any offline editors for HTML, CSS, and JavaScript similar to JSFiddle, jsbin, or codepen?

Is there an alternative to JSFiddle.net that allows users to experiment with Javascript, HTML, and CSS offline in a similar way? ...

javascripthtmlcss

Adjust the height of the Twitter Widget to be proportionate to the height of its parent div dynamically

I have integrated the Twitter widget into my library management system, but I am facing an issue with its fixed height. Is there a way to make the height dynamic through CSS? Any suggestions on how this can be achieved will be greatly appreciated. Below ...

htmlcsstwitterwidgettwitter-widget

Adding a new element with Jquery when a dropdown option is selected

What is causing this issue to not function properly? <script> $(document).ready(function(){ $('#custom_field option').click(function(){ $('#custom_field_input').append('<tr><td></td> ...

phpjavascriptjqueryhtmlforms

Generating HTML table rows dynamically from objects using Angular's ng-repeat functionality

In my Node-RED setup, I am utilizing the HTML angular code within a "template" node. Within my system, I have an object that consists of circuit boards distinguished by serial numbers. Each circuit board is equipped with two channels, each having its own ...

htmlangularjsobjectnode-red

Struggling to make changes to a Styled Component in a React application

In a certain file, I have a BaseComponent composed of various other components and being exported. The top level of the BaseComponent contains a wrapper responsible for managing margins. When I export it and attempt to override some styles with: //other fi ...

javascriptcssreactjsstyled-components

Unable to apply CSS styles to a form input using Ajax

Alright, so I've got this Ajax form that successfully fetches the data and displays it in #register_msg. However, I'm also trying to apply some styles to the input forms. Here's my Ajax code, along with the form. But for some reason, the st ...

javascriptphpjquerycssajax

Using JavaScript/JQuery, change relative or viewport sizes to fixed sizes when the page loads

Wishing you a delightful day. As I work on my website, I find myself relying heavily on viewport units like vw and vh for all measurements such as font size, padding, margin, width, and height. These units provide the flexibility needed to ensure that the ...

javascriptjqueryhtmlcssviewport-units

Shift the sideways movement of the triangle symbol

I currently have a main menu in the header with links, accompanied by a moving triangle that changes position as the user hovers from one page to another. While I want to maintain the dynamic movement, I am seeking a smoother transition effect similar to w ...

javascriptjqueryhtmlcss

What steps should I take to address the issues with my quiz project?

I've been working on a new project that involves creating a quiz game. I came across some code online and decided to customize it for my needs. However, I'm encountering some issues with the functionality of the game. Right now, the questions ar ...

javascripthtmlbuttondom-events

Get only the text content from a hyperlink using Tinymce-4

Within tinymce.activeEditor, I currently have this line of innerHTML code (part of a ul-list): <li><a href="#">Important words</a></li> When I place the caret within the sentence "Important words," and click a button with the foll ...

javascripthtmltinymce-4

Converting HTML Content into Json Data

When trying to update the content area on my website without refreshing the entire page, I encountered difficulties in pulling data from a JSON file. Despite attempts at using AJAX and conducting research on JSON and AJAX techniques, I was unable to succes ...

jqueryhtmljsonajax

Tips for increasing the complexity of your bottom-line animation

Hello everyone, I am currently learning the basics of CSS and have a question about a specific animation effect. Please bear with me if this type of inquiry is not suitable for StackOverflow. In my index.html file, I have the following code: <n ...

htmlcss

Can WireMock be used to send an HTML file as a response?

Is it possible to return an HTML file as a response in WireMock and how can this be achieved? ...

javascriptjavahtmlseleniumwiremock

Combination of words & design having "background-image:url"

Currently utilizing Thymeleaf within a Spring Boot project, the following code initializes an image in the center of the screen (sourced from this .html ): <div class="col-lg-9 image_col order-lg-2 order-1"> <div class="single_product_image"& ...

htmlurlstylesbackground-imageel

Using Selenium to stream audio directly from the web browser

For my current project, I am utilizing Selenium with Python. I have been exploring the possibility of recording or live streaming audio that is playing in the browser. My goal is to use Selenium to retrieve the audio and send it to my Python application fo ...

javascriptpythonhtmlseleniumaudio

Wordpress Custom Post Type with a Sleek Slider Plugin

I am currently using a static slick slider to display testimonials on my website. Instead of hardcoding the testimonials, I want to fetch them from a WordPress custom post type that I have created. Can someone guide me in the right direction: <section ...

phphtmlwordpress

Having trouble getting the Pokemon modal to show both the type and image?

HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My First JS App</title> <lin ...

javascripthtmlbootstrap-4bootstrap-modal

The combination of HTML, CSS, and vertical text margins is essential for creating visually

Looking for some guidance on how html text and margins work? If there's a good online reference you can point me to, I'd greatly appreciate it! I'm currently struggling with setting precise margins for text. In the example below, there&apos ...

htmlcsstextmargins

Struggling with using flexboxes and creating animated elements

Seeking assistance with animating the search bar on a website project. The animation is functioning, but the search input abruptly moves when the animation starts, as shown in this GIF: I am utilizing jQuery for the animation because I also want to implem ...

javascriptjquerycssanimationflexbox