relocate the figcaption below the image on mobile devices

Currently, I am in the process of updating an old website to make it responsive, and I have encountered several challenges along the way.

My goal is to have the fig captions displayed on the right side in the desktop version, but underneath the figure in the mobile version. However, I am struggling to get the figcaptions to appear below the image.

Any assistance or advice on this matter would be greatly appreciated!

Best regards

    <style type="text/css>
        body {
            margin: 60px;
        }
        .sidebar {
            margin: 0;

            padding: 0;
            text-align: left;
            width: 100%;
            background-color: transparent;
            position: fixed;
            height: 100%;
            overflow: auto;
           
            list-style-type: none;
            font-size: 14px !important;
        }

        .sidebar a {
            display: block;
...  
(partial content)

<!doctype html>
<html lang="en">

<head>
    <title>Christoph Urwalek</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


</head>


<body>
    <!-- START Mobile Nav-->
    <div class="continer">
    
    <div id="myNav" class="overlay">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <div class="overlay-content">
            <a href="./painting.html">painting</a>
            <a href="./hungabunga.html">drawing</a>
            <a href="#">collage</a>
            <a href="#">video</a>
            <a href="#">current</a>
            <a href="#">text</a>
            <a href="#">biography</a>
            <a href="#">contact</a>
        </div>
    </div>
    <span class="d-xl-none" style="font-size:30px;cursor:pointer; color: #4d4d4d;" onclick="openNav()">&#9776; <font size="-1"><b>Christoph Urwalek</b></font></span>
  </div>
    <!-- END Mobile Nav-->
...(partial content)

Apologies for including all the code, but I wanted to ensure nothing important was missed out that could aid you in providing me with assistance.

javascripthtmlcssbootstrap-4figcaption

Answer №1

To address smaller device display issues, consider swapping out d-flex for block. However, a more comprehensive solution would involve transitioning everything to leverage the capabilities of Bootstrap 4 as originally designed, and eliminating unnecessary elements such as the table.

@media screen and (max-width: 768px) {
       /* custom styles */
       .d-flex {
           display: block !important;
        }
  }

Note that there are some flaws in the code, including an empty vertical-align property for .figure img, as well as an unclosed <a> tag.

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

Is it possible to assign a class to the initial word within a designated class?

How can I customize the first and second word of a specific class in my code? This is an example of my current code: <h2 class="content-heading">Latest News</h2> I would like to achieve something similar to this: <h2 class="content-headi ...

javascriptjqueryhtmlcss

Alert for JavaScript Increment (++) Operation

While reviewing my code using jslint, I noticed a warning regarding the increment operator: var x = 1; x++; Warning: Unexpected expression '++' in statement position. According to the documentation: "They are second only to faulty archi ...

javascriptjslint

Is there a workaround to prevent me from using overflow: scroll when I addEventListener("touchmove", preventBehavior, false)?

I am developing an iOS app using PhoneGap, and I have encountered a problem where the window cannot be moved due to the code document.addEventListener("touchmove", preventBehavior, false); Although this code prevents the window from moving, it also stops ...

javascriptioscordovaoverflowtouchmove

Is there a way to change this from webkit to moz?

Is there a way to change this code from webkit to moz? background-color: #fff; background-image: -moz-linear-gradient(0deg, transparent 79px, #ABCED4 79px, #ABCED4 81px, transparent 81px), -moz-linear-gradient(#EEE .05em, transparent .05em); ...

csswebkit

Creating a debounce functionality by isolating it from a keydown event listener

I have a table with selectable rows using up and down arrows. When a row is selected, an ajax call is made to fetch the record. To prevent users from spamming ajax requests, I implemented a debounce function called from a directive triggered by a keydown ...

javascriptjqueryangularjsajax

Difference among rows

I am currently working on a table design with 2 rows that have different colors. There seems to be some space between the two rows and I am looking for a way to eliminate that gap. Can anyone provide me with a solution? https://i.stack.imgur.com/8N8Rw.png ...

htmlhtml-table

React.map does not retrieve the specific value

I am facing an issue with my list of items. I have implemented it using mui list, and I have also added a button for editing the list. However, when I click on an item, I am getting the value of the last item instead of the one I clicked on. Below is my f ...

javascriptreactjsmaterial-ui

Managing POST request data in Express: A step-by-step guide

Currently, I am facing an issue with my alert button on the client side, which has an event listener that is supposed to send data to the server. Below is the code snippet for the client side: alertBtn.addEventListener("click", () => { axios ...

javascriptnode.jsexpress

What is the process for running "node server.js" within codelab?

I am currently going through a codelab tutorial on Bitbucket at this link After installing node.js for the first time, I encountered an error when trying to run the server.js file: node server.js The error message "node: Command not found" appeared even ...

javascriptnode.jswebrtc

`How can I manage my electron.js application effectively?`

As a newcomer to electron.js, I have successfully created a game using html, css, and javascript that currently runs offline on the client side. However, I am now looking for a way to access, analyze, and make changes to this app. One solution could be lo ...

javascriptelectron

How to access and retrieve data from a USB flash drive using Javascript

I am looking to print PDF files from a USB flash drive. I have decided to use Mozilla Firefox and the R-kiosk plugin along with the open library PDF.js, but I am facing an issue. How can I read folders and files to create a tree structure without using ...

javascriptpdffilesystems

Array of JSON data passed in the request body

Recently, I have been attempting to pass JSON data to my req.body. The data structure is as follows: answers = ["A","B"]; //An array to be included in the JSON Object var Student_Answers = { //JSON object definition Answers: answers, matricNumber: ...

javascriptnode.jsjsonexpress

What is the best way to align text and an arrow on the same line, with the text centered and the arrow positioned on the

.down { transform: rotate(45deg); -webkit-transform: rotate(45deg); } .arrow { border: solid black; border-width: 0 3px 3px 0; display: inline-block; padding: 30px; } <p>Down arrow: <i class="arrow down"></i></p> Looking to ...

javascripthtmlcss

Data is not being stored in the MongoDB Model/Schema as expected

I'm encountering an issue with my MongoDB database. It appears to not be receiving the data I am attempting to send to it, resulting in an empty database despite everything else functioning smoothly. The application I'm working on involves scrap ...

javascriptnode.jsmongodbmongoose

Determining the Location of a Drag and Drop Item

I have been utilizing the code found at for implementing Drag & Drop functionality. My inquiry is: How can I retrieve the exact position (x,y) of a group once it has been dragged and dropped? ...

javascripthtmlcanvasdrag-and-dropkineticjs

Current page with animated CSS3 menus

I found a cool menu example on this webpage: http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/index10.html. I want to modify it so that the current page's menu item has a different color from the others. For example, when I'm on the home ...

jqueryhtmlcss

What is the best way to utilize Django forms with a <select> value that is frequently used?

I am currently developing an application that enables users to interact with a database of information, including searching and saving entries. Within the search feature of the application, there are multiple fields where users should specify comparison o ...

htmldjango

The React material-table only updates and rerenders the table when the data is updated twice

Currently, I am utilizing a tool called material-table (check it out here: https://material-table.com/#/) which has been developed using React. The issue I am facing is that the data passed as a prop to material-table doesn't seem to update correctly ...

javascriptreactjsreact-nativematerial-uimaterial-table

The image on the landing page is not properly scaling to fit the size requirements

Currently utilizing Bootstrap Studio, I incorporated the code background-size:cover. While it works well in desktop mode, it unfortunately isn't very mobile-friendly. Below are screenshots for reference: Mobile View Example Desktop View Example ...

htmlcssbootstrap-4

How to implement and utilize a history-object interface in React with Typescript?

Can you help me with setting up an interface for a history object in my component? Currently, it is typed as any and I want to type it appropriately. Object: Here's the code snippet: import React, { useState } from 'react'; import { Row, C ...

javascriptreactjstypescript