Bootstrap image with simplistic arrow indicators

I'm facing a minor issue that I need help solving. I want to have two simple arrows (one pointing left and one right) vertically aligned in the center of an image. Additionally, these arrows should resize proportionally when the screen size changes.

Currently, my code looks like this:

<div class="row">
    <div class="offset-md-1 col-md-1">
        <i class="fa fa-arrow-left" style="position:relative; top:50%"></i>
   </div>
    <div class="col-md-8 detail_pic">
        <img src="#image" style="width:80%;">
        <h2 style="text-align:center;">#Title</h2>
    </div>
    <div class="col-md-1">
        <i class="fa fa-arrow-right" style="position:relative; top:50%"></i>
    </div>
</div>

The result resembles the image below. When I reduce the size of the screen, the columns stack on top of each other rather than staying in line. How can I modify the code to ensure the arrows and image stay within one column and remain responsive?

htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

When it comes to adjusting the image size, a great technique is to utilize viewport units for automatically resizing arrow icons. For example, you can set the width of your images with img{ width: 2vmin}, which adapts to the shorter of the width or height dimensions in your viewport and utilizes a percentage of this dimension... To learn more about this approach, check out this CSS Tricks link: css-tricks.com/fun-viewport-units

If you want to position the arrows in the center of the div, consider using the following CSS:

img{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

To delve deeper into flexbox vertical centering techniques, you may find this article helpful: phillipwalton.com

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 getJSON API functions properly on a local machine but encounters issues when deployed on a

I have a vision to create a web application that can display the weather of any city based on user input. I've divided my project into three files - index.html for collecting user input, index2.html for retrieving and displaying the data, and a CSS fi ...

javascripthtmlcssjsonwebserver

The Bootstrap Grid Leaves Blank Spaces Unfilled

View the screenshot here Take a look at the image above. I'm struggling to fill the empty space with div elements. I've experimented with display:inline-block and other display properties, but they haven't yielded the desired results. < ...

htmlcssbootstrap-4

What is the best way to target an anchor element that includes a particular word using jquery or css?

I attempted $('a[title="*"]').find('contains("PDF")').css({'background-color':'red'}); Unfortunately, this code is not working as expected. To clarify, I am searching for a specific word in the title. ...

jquerycss

How to center an image within a div without it moving

I have set up a JSFiddle for reference: http://jsfiddle.net/AsHW6/ My task involves centering the down_arrow.png images within their respective div containers. I have successfully centered the up_arrow.png images using auto margins. These images are posit ...

csshtmlcss-positionalignment

The value calculated by Auto does not display as a valid number in Angular 8 until it has been manually edited

Having an issue with a form submission for invoicing. The total value field, which is auto-calculated based on quantity and unit price, does not show up as numeric data in the backend onSubmit event unless I manually interact with it by adding something ...

htmlangular

Display a pop-up upon clicking a button

I've created a custom popup form using Flodesk and added the corresponding Javascript Snippet to my website just before the closing head tag. <script> (function(w, d, t, h, s, n) { w.FlodeskObject = n; var fn = function() { (w[n] ...

javascripthtmlshopify

Using the Twit package on the client side: a step-by-step guide

I have been utilizing the Twit package for searching tweets. After executing the js file in the console, I am able to see the tweets but when trying to use them on my webpage, an error 'Uncaught ReferenceError: require is not defined' pops up. Th ...

javascripthtmlapitwittertwitter-oauth

How to determine if an Angular list has finished rendering

I am facing an issue where I have a large array that is being loaded into a ul list using ng-repeat in Angular. The loading of the list takes too long and I want to display a loader while it's loading, but hide it only when the ul list is fully render ...

javascripthtmlangularjs

Accelerate loading times of HTML files on Android apps

After clicking on an image, I want the corresponding HTML page to load instantly. However, there is a delay of a few seconds before the page actually appears. How can I reduce or eliminate this waiting time and ensure that the page loads as quickly as po ...

htmlperformanceload

The content on the right side is spilling over my footer and causing

I am struggling to understand why the content in the right column is overlapping my footer. I believe it has something to do with a float, but I can't seem to pinpoint the exact issue. Could you please take a look at this page for me and provide some ...

htmlcsscss-float

Implement a Selection Feature in Angular

Currently, I am working on an application where users can add new rows with the same fields. One of the requirements is to allow users to add an option to a select element. While I have successfully implemented this in jQuery, I am facing challenges integr ...

javascriptjqueryangularjscss

Using Jquery and css to toggle and display active menu when clicked

I am trying to create a jQuery dropdown menu similar to the Facebook notification menu. However, I am encountering an issue with the JavaScript code. Here is my JSFiddle example. The problem arises when I click on the menu; it opens with an icon, similar ...

javascriptjqueryhtmlcss

Inquiring about the rationale behind using `jquery.ui.all.css` specifically

I'm curious about the impact of jquery.ui.all.css on Tabs As soon as I remove it, <link rel="stylesheet" href="jquery/dev/themes/base/jquery.ui.all.css"> My tabs stop functioning. Here's my query: What exactly does the jquery.ui.all.cs ...

javascriptjqueryhtmlcssjquery-ui

Utilizing iPad, Safari, and CSS to effortlessly fill a page with flexbox properties

Trying to create a flex layout that expands the main area to fill the entire height of the display, with a footer always at the bottom when the content is small. However, if the main content exceeds the display size, it should behave like a normal page and ...

htmlcssipadsafariflexbox

To avoid truncation issues, consider inserting a plus sign following the ellipsis in the text-overflow property

Hey there! I have a table that contains some text and I'm looking to shorten the text after it reaches a certain length. I was able to achieve this using the text-overflow property. .overflow { width: 70px; overflow: hidden; text-overflow: elli ...

htmlcss

Keep the first column of an HTML table fixed as you scroll horizontally

Below is an HTML table that I have created: <table id="customers" class="table table-bordered" width="100%"> <thead> <tr> <th colspan="2">Activities</th> <th>Mon 17</th> <th>Tue 18</th> </thead> ...

javascripthtmlcss

What is the best way to implement jQuery on my website?

Instead of copying all the example code here, you can check out the jQuery demo page: Demo Page I would like to integrate the Latest News example with scrolling text in red from the demo page into my website. The demo page also provides links to the sour ...

javascriptjqueryhtmlcss

Ways to avoid the browser from storing a JSON file in its cache

Hey there, I'm working on a project and running into some issues with caching. The problem I'm facing is that the browser keeps holding onto the json file containing save data even after I update it elsewhere. This means that the browser is readi ...

javascripthtmljsoncaching

Prevent a click event from triggering on one div when another div is clicked using jQuery

I am in the process of designing a website that includes two clickable divs, "#coloursettings" and "#powersettings". Both of these divs successfully unbind the menu ("#tab a"), but I am struggling to make them deactivate each other upon clicking one, then ...

jqueryhtmlcssbindunbind

Issues with Disabling the Browser's Back Button with jquery

I have been attempting to prevent the back button from functioning in a specific Browser, Microsoft Bing. Interestingly, my code works only if I click somewhere in the window first. If I don't click anywhere and try to go back directly, it still allow ...

javascripthtmljquery