My website includes a <div> section that features both an image and a <figcaption>. However, when I attempt to apply padding to the <figcaption>, it does not seem to take effect

I've been trying to troubleshoot this code, but the padding just won't cooperate and I can't seem to figure out why.

 .img-caption {
        visibility:hidden;
        width:22%;
        height:435px;
        background-color:#f9f4e3;
        border: 2px solid #000;
        box-sizing:border-box;
        padding-left:2px;
    }
<div class=img-div>
        <img class="image interpreter" src="https://images-na.ssl-images-amazon.com/images/I/41ffYO-4WQL.jpg">
        <figcaption class="img-caption interpreter-caption"><h3>Interpreter of Maladies</h3><p>Sit tempor amet dolor sanctus sed clita consetetur et justo, et et et gubergren lorem dolor ea dolor. Aliquyam sed.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus provident id aut tenetur, nam reprehenderit nesciunt, saepe iste animi perferendis ipsum recusandae praesentium? Aliquid nisi reiciendis at debitis est impedit.</p></figcaption>
        </div>

css

Answer №1

Your CSS class img-caption is currently set to invisible, which means the padding and other elements within it are not visible. By changing the visibility to visible using visibility:visible;, you will be able to see the figcaption and observe that the padding is being applied properly.

.img-caption {
    visibility:visible;
    width:22%;
    height:435px;
    background-color:#f9f4e3;
    border: 2px solid #000;
    box-sizing:border-box;
    padding-left:2px;
}
<div class=img-div>
    <img class="image interpreter" src="https://images-na.ssl-images-amazon.com/images/I/41ffYO-4WQL.jpg">
    <figcaption class="img-caption interpreter-caption"><h3>Interpreter of Maladies</h3><p>Sit tempor amet dolor sanctus sed clita consetetur et justo, et et et gubergren lorem dolor ea dolor. Aliquyam sed.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus provident id aut tenetur, nam reprehenderit nesciunt, saepe iste animi perferendis ipsum recusandae praesentium? Aliquid nisi reiciendis at debitis est impedit.</p></figcaption>
    </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

The presence of element a within the element ul is not permitted in this particular scenario. Additional errors from this section will not be displayed

Having trouble with this code snippet: <nav role="navigation"> <div id="menuToggle"> <input type="checkbox"/> <span></span> <span></span> <span></span> ...

htmlcss

Is there a way to implement an onclick event on a specific line of text that triggers a popup box only when the text is clicked, without the popup appearing automatically when

I received assistance from a fellow user to customize a popup that turned out great. However, I'm having trouble getting the onclick function to work properly so that the popup only appears when the phone number is clicked. Ideally, I want the phone n ...

javascripthtmlcssonclick

Always ensure that the horizontal scrollbar is visible without the need for vertical scrolling

I'm attempting to create a data grid-style layout where the left side is fixed and only the right side is scrollable. However, the entire div needs to be vertically scrollable. The concept is functioning correctly, but the horizontal scrollbar appears ...

htmlcssflexbox

Tips for changing the font size of labels in a tree view using Material UI

While working with material ui treeview, I have customized the fontSize for each treeItem as shown below: <TreeItem key={mainCategory.name} nodeId={mainCategory.name} label={mainCategory.name} disabled={ ...

cssreactjsmaterial-uitreeview

Swap Text/Characters When Hovered Over

I'm looking to add a fun interactive element to my webpage where the letters in certain text rearrange when a user hovers over it. For instance, hovering over "WORK" would display "OWKR" instead. I have a feeling that some JavaScript is needed for thi ...

javascriptjqueryhtmlcss

Improving the style of Google Maps InfoWindows for right-to-left languages

I'm currently working on a Google Maps marker infowindow and trying to adjust the padding specifically for RTL languages. Here's what I've attempted so far: google.maps.event.addListener(marker, 'click', function () { i ...

javascriptjquerycssgoogle-maps

Insert Angular HTML tag into TypeScript

I am currently working on creating my own text editor, but I'm facing an issue. When I apply the bold style, all of the text becomes bold. How can I make it so that only the text I select becomes bold without affecting the rest of the text? Additional ...

javascripthtmlcssangulartypescript

Creating the appearance of a white sheet of paper on a computer screen

I appreciate all the comments provided earlier. Looking back, I realize I should have been more thorough in my explanation. Hopefully, the updated version will make things clearer. On a broad level, my goal is to create a digital screen background that re ...

htmlcsscolors

"Enhance Your Design with Hovering CSS Backgrounds

Seeking assistance with changing the background image on span hover. If anyone can assist, I have included the complete code for the website below. Take a look at the full website code here: Pastebin CSS Pastebin JavaScript ...

javascriptcss

Tips on creating a responsive div element within the viewport?

I have a variety of nested div elements within a parent div, set up like this: #mycontent > div { width: 14.28%; } <div id="myheader">some header content</div> <div class="container" id="mycontent"> <div class="outerdiv" id= ...

htmlcss

Place a Three.js scene within a jQuery modal dialogue box

I am attempting to integrate a Three.js scene into a jQuery modal window. The objective is to utilize the Three.js scene in a larger window size. This scene should be displayed after clicking on an image that represents the scene in a smaller dimension. Y ...

javascriptjquerycsscanvasthree.js

Different "criteria" for CSS wildcard selectors using Selenium

There are several CSS webelements on my page with ids in the format: cell_[number]-button_[number] I am attempting to target ALL of these elements by using Selenium to locate all elements that begin with cell and include button: var elements = Util.driver ...

javacssseleniumwildcard

Tips for displaying an image using the image tag in jQuery

I am looking to dynamically append a share button image after every image tag that meets certain criteria. For the code snippet and demonstration, you can visit this fiddler link here. $(document).ready(function() { $("img").each(function() ...

javascriptjqueryhtmlcss

Failure to Present Outcome on Screen

Seeking assistance! I attempted to create a mini loan eligibility web app using JavaScript, but encountered an issue where the displayed result did not match the expected outcome upon clicking the eligibility button. Here is the HTML and JavaScript Code I ...

javascripthtmlcssbootstrap-4

Attempting to display a larger version of an image sourced from miniature versions fetched with the assistance of PHP and

I'm dealing with the challenge of displaying thumbnails fetched from a database. PHP is successfully interacting with and presenting my thumbnails. I'm currently faced with the issue of passing the id from the database to the imageID in my JavaSc ...

javascriptphphtmlcss

Entering in full screen mode

Is there a way to create a first screen appearance that spans the entire screen? I want the whole page to be fullscreen and when someone scrolls down, it transitions to a new screen. I am struggling to find a solution for this. body { margin: 0 0 0 0; ...

htmlcss

Words within a string are divided in the center, with JS and CSS involved

I'm currently working on developing a hangman game in JavaScript (I am new to web technologies) and I have come across my first challenge. The placeholder string for the word to be guessed, which consists of hyphens and spaces, is overflowing from the ...

javascriptcsscss-hyphens

What are the steps for editing and preserving a logo with an 8-bit indexed color palette?

After purchasing a RE/MAX franchise, I now need to make edits to the official logo found on remax.com using Adobe Photoshop. However, I have encountered a problem when trying to edit their logo in Photoshop. When I open their PNG logo, the layer appears d ...

cssimagepngphotoshop8-bit

Aligning floating elements in the center

Presently, I am working with the following code... <!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="UTF-8" /> <link href="verna.css" type="text/css" rel="stylesheet" /> </head> ...

csshtmlcss-float

Reposition icons to the center within the icon-div container

I am trying to center align the elements in my icon-div as shown in the wireframe image. What steps should I take to achieve this layout? HTML: <div class="icons_div"> <div class="row bg-secondary"> <div class="col-sm-2"> ...

htmlcssfrontendbootstrap-4web-frontend