problem with arranging photos and captions

When viewing this page in a narrow browser window, an issue arises with how the photo captions are displayed at the bottom of the page.

It's evident that the caption extends past the right edge of the photo. My preference would be for the photo and caption to have the same width, but narrowing the caption to match the photo's width could also work.

The code for displaying a single photo and its caption is as follows:

<div class="four columns">
  <div class="ft-work">
    <img src="images/slider/mum-daughter.jpg">
    <div class="ft-work-title text-center">
      <h5 class="alt-h">Caption??</h5>
    </div>
  </div>
</div>

I noticed that by removing this CSS rule:

#featured-work-slider img {
  width: auto !important;
}

the photo aligns correctly with the caption, but unfortunately, the image becomes distorted and stretched.

Answer №1

This line caught my eye in your style sheet:

#featured-work-slider img {
    display: inline-block !important;
    width: auto !important;
}

I found that changing it to the following solved the issue for me (on both mobile and desktop views).

#featured-work-slider img {
    display: inline-block !important;
    width: 100%;
    height: auto;
}

Answer №2

Regarding your point, it is recommended to eliminate the width: auto !important; property from the image on mobile view. It would be beneficial to include the following code to ensure the correct aspect ratio: height: 100%;

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

Animation scaling on the iPhone seems to abruptly jump away once it finishes

Encountering an issue with animations that is causing unexpected behavior on physical iPhone devices but not in the simulators. The problem arises when the background zooms in and then the div suddenly jumps to the left after the animation completes, as sh ...

Creating an Array in jQuery to Store Selected and Unselected Items

Looking for a way to collect all selected items from a form and save them in an array, as well as gather the non-selected elements and store them in a separate array. <select multiple id="conditionBad" name="conditionBad"> <option class=" ...

Creating multiple div elements with changing content dynamically

I am facing an issue with a div named 'red' on my website where user messages overflow the 40px length of the div. To prevent this, I want to duplicate the 'red' div every time a message is sent so that the messages stay within the boun ...

Aligning Cards using Bulma Styles

Currently in the process of developing a Pomodoro Timer application and utilizing Bulma as my CSS Framework. I am really enjoying working with it thus far, although still getting the hang of Flexbox. I am seeking advice on the best approach for this projec ...

Display completed survey

I am in the process of developing a mobile app that allows users to answer questions in a questionnaire. Once the questionnaire is completed, the user can save it in LocalStorage. Upon revisiting the page, the user will see all previously answered question ...

Ways to enable automatic scrolling of a page as the content expands (Utilizing collapsible elements)

For a recent project I've been working on, I decided to include 4 collapsible text boxes. However, I encountered an issue where opening content1 would expand and push down content2-4, requiring the user to manually scroll to view the remaining collaps ...

How to customize the hover background color for multicolored series in Highcharts?

Highcharts offers a background color for all columns in a series. The hover color across themes is consistently a light blue (155, 200, 255, .2). To see an example, visit: http://jsfiddle.net/38pvL4cb/ If you look at the source code, Highcharts creates a ...

Adjusting the options in the subsequent dropdown menu based on the selection made in the initial dropdown menu

I am currently working on select boxes where values are dynamically added through an array. For example, if I have 4 values in the first select box, I only want to display 3 values in the second select box, excluding the value that has already been selecte ...

The priority of custom attributes in HTML

There seems to be some ambiguity regarding whether data- attributes should be considered primary or secondary syntax. Is there a defined standard for this in major frameworks like Angular? For example, if an attribute is specified as both my-attr and dat ...

Struggling to have PHP process and store form data in MySQL database

I am attempting to process HTML form data into a MySQL database using PHP for the first time, and I am feeling overwhelmed. The form is POSTed to the formSubmit.php file, where the variables are created for the SQL command to query. I have tried adjusting ...

What is the proper way to structure keywords in Microdata for a CreativeWork?

As I delve into Microdata, I am exploring the utilization of Schema.org's keywords for CreativeWork. The schema indicates that it should be text, but I am unsure whether to place each keyword in a separate element with itemprop="keywords", or include ...

Extract the identifier of the class and subsequently pass it to the PHP script

How do I retrieve the id of a dynamically created class within a while loop, where the id corresponds to the user who posted it, and then send this id to PHP? Here's exactly what I'm trying to achieve: HTML: <div class='lol' id=&a ...

The popover seems to be failing to appear

I am struggling to get a popover to appear when clicking on an appended href element dynamically. Here are the code snippets I have tried: <div id="myPopoverContent"> ...stuff... </div> <div id="div3" style= "width:200px;height:200px;" ...

Would it be possible for me to adjust the CSS to center the sections?

I'm facing an issue with the layout of my website at . At the bottom, there is a navigation menu and three boxes with images. However, they are currently left-aligned instead of centered. Can anyone suggest CSS code that I can use to center them? Her ...

Tips for preventing vertical spaces between table header cells in material-UI

Is there a way to remove the vertical gaps between header cells in the MUI table? To see an example of the issue, check out this codesandbox link: https://codesandbox.io/s/mui-material-table-sticky-header-forked-euilo3?file=/tsconfig.json I have attempte ...

What could be the reason for the individual components not being populated within the listItem?

*** I am iterating through an array and calling the ListItem component for each item. However, only one ListItem is being populated when there should be 3. Can someone please help me figure out what's wrong? *** Here is my code in App.js *** import F ...

Utilizing Pseudo Classes in Custom Styled Components with MUI

Exploring the world of React and MUI styled components for the first time. Currently, I'm delving into grid layouts and trying to style all children of a specific component. My goal is to target ${Item1}:nth-child(3n-1), ${Item2}:nth-child(3n-1), ${It ...

Styling Radio Buttons and Links in Horizontal Layout Using Bootstrap

Encountering an issue in Bootstrap while attempting to incorporate custom radio buttons and a hyperlink in the same row. It seems that either the hyperlink functions OR the data-toggle feature for radio buttons works, but not both simultaneously, especiall ...

Gorgeous Stew encounters a cautionary message before encountering a glitch in the middle of the

Currently, I am systematically going through every Wikipedia page related to a specific date (from January 1 to December 31). My primary focus is to extract the names of individuals who celebrate their birthday on that particular day. However, as I reach A ...

When viewed on mobile browsers, the side-by-side divs in a tabbed layout appear to be

Looking for some help with responsive design for the "PORTFOLIO ATTRIBUTES" tab on my website. On desktop, the content displays fine, but on mobile it overlaps and cuts off. Here's the link to the page in question: . Any suggestions on how to maintai ...