Is there a way to lower the position of the main image slightly?

Is there a way to adjust the positioning of the featured image so that it lines up better with the title? Check out this page on AnyGeeks

This is the code snippet responsible for setting the image.

<div class="container">
<div class="jumbotron jumbotron-fluid mb-3 pl-0 pt-0 pb-0 bg-white position-relative">
    <div class="h-100 tofront">
        <div class="row justify-content-between">
            <div class="col-md-6 pt-6 pb-6 pr-6 align-self-center">
                <p class="text-uppercase font-weight-bold">
                    <a class="text-danger" href="./category.html">{% block category %}{% endblock %}</a>
                </p>
                <h1 class="display-4 secondfont mb-3 font-weight-bold">{% block ptitle %} {% endblock %}</h1>
                <p class="mb-3">
                    {% block desc %} {% endblock %}
                </p>
                <div class="d-flex align-items-center">
                    <img class="rounded-circle" src="{{url_for('static',filename='img/avatar.jpeg')}}" width="70">
                    <small class="ml-2">RahulVk<span class="text-muted d-block">{% block dtt %}{% endblock %}read</span>
                    </small>
                </div>
            </div>
            <div class="col-md-6 pr-0">
                <img src="{% block featuredImage %}{% endblock %}">
            </div>
        </div>
    </div>
</div>

Flask is being used as the backend, hence the presence of those tags.

Answer №1

One recommendation is to include the display flex property in your div and align-items center:

<div class="col-md-6 pr-0 d-flex align-items-center">
     <img src="{% block featuredImage %}{% endblock %}">
</div>

Alternatively, you could also add some padding top:

<div class="col-md-6 pr-0 pt-4">
     <img src="{% block featuredImage %}{% endblock %}">
</div>

Answer №2

One recommendation I have is to incorporate the align-items-center class within your .row class. As suggested by @flpfar, you can also include the col-md-6 class for a 100% effective solution.

<div class="row justify-content-between align-items-center"></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

Discovering the Style of CSS Using JavaScript

I have implemented a JavaScript file to validate whether the text-box is filled out correctly or not. My goal is that once all the text-boxes are correctly filled out, the application should proceed to the next page or trigger some action (in my case, disp ...

How to style two distinct elements within an HTML select tag option

Within my PHP script, I am retrieving a table with two columns from the database and presenting them in a dropdown list. Below is the code snippet: echo "<select id='isv' class='required'>"; while($row = pg_fetch_row($result)){ ...

Swapping out a <DIV> element following a specified duration

Looking to swap out DIV-A with DIV-B on a landing page after 10 seconds. After some research, it seems like JQUERY is the best option, but I'm unsure about how to proceed. Most solutions involve cycling through DIVs or replacing them on a button clic ...

Issues with escaping HTML encoding

Currently working on an Android app that involves querying a webservice and receiving a JsonObject. Once I have the desired String, I encounter characters like: est&amp;aacute; I've experimented with two methods: StringEscapeUtils.escapeHTML4(te ...

The CSS JSON code I have written is not having any impact on the appearance of my div

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles/common.css"> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script type='text/javascript'> ...

What is the best way to apply the addClass method to a list element

I've been searching for a solution to this issue for some time now, and while I believed my code was correct, it doesn't appear to be functioning as expected. HTML <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js ...

Achieving vertical centering by adjusting padding within the parent container

I've successfully set up a DIV with a height of 200px and an inner div at 150px, leaving me 50px for the image caption. Now I want to vertically center the text within that remaining 50px. .captioned { width: 300px; height: 200px; display: fl ...

Troubleshooting: Issues with jQuery's clone() function

I'm facing an issue with the code below. It works correctly when I use td instead of p. $(document).ready(function() { $("button").click(function() { $("th:contains('2G Band') ~ p").clone().appendTo("#2g"); }); }); <script src= ...

The ng-click functionality seems to be malfunctioning when used within the controller in conjunction with ng-bind

After coding, I noticed that my ng-click function is not working. When I inspected the element, I couldn't find ng-click displayed anywhere. Can someone please help me figure out what I'm doing wrong? var app = angular.module('myApp' ...

What is the best way to align an image underneath text?

I'm currently working on this design concept: https://i.stack.imgur.com/wJm0t.png Below the title, there is a particle image with half square images positioned on the top right and bottom left corners. My goal is to center the particle image below th ...

Problem with ngStyle: Error indicating that the expected '}' is missing

I encountered an error in the Chrome console when trying to interpret the code below: <div [ngStyle]="{'width': '100%'; 'height': '100%'; 'background-size': 'cover'; 'background-repeat&ap ...

Using Angular template to embed Animate CC Canvas Export

Looking to incorporate a small animation created in animate cc into an angular template on a canvas as shown below: <div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:1014px; height:650px"> <canvas id="canv ...

Update destination upon click

I'm new to JavaScript and attempting to modify a redirect link using checkboxes that will modify the URL, followed by a button that will use the updated URL. However, I'm facing some challenges with my code and could use some guidance. Here is t ...

<!--[if IE]> does not function properly on any web browser

Hello, I am experiencing a perplexing issue and despite searching extensively on Google, I have been unable to find a solution! I am trying to change the body background color to red only in Internet Explorer, but it is not working as expected. Here is t ...

What sets apart the usage of :host from its absence?

I'm finding it quite confusing to understand the usage of :host in Angular. For instance, let's consider a CSS file named a-component.component.css and its corresponding HTML file named a-component.component.html with a selector of app-a-compone ...

A method for highlighting duplicate rows in a DataTable by formatting them with the same color

I am currently utilizing the DataTable plugin to display rows in a table. I would like to highlight duplicate rows in the same color scheme. Can someone please assist me with this issue? In the example below, the entry for Black Winters is duplicated. I ai ...

"Using Vue's v-model directive in conjunction with a select input

I'm attempting to set any option within my select input as a value in an object. My goal is to utilize v-model for this, but I'm still unsure of the process. Below is my current attempt: <div class="select-wrapper"> <select r ...

How to create a WordPress sidebar that remains fixed while scrolling

I have a WordPress website with a right sidebar that I want to make sticky while scrolling up and down. I applied some CSS styles to achieve this, and now the sidebar is sticky. However, the issue is that it keeps shifting its position from right to left. ...

Tips for getting this image swap code to function properly on your Wordpress site

After following a tutorial on Design Shack, I created a portfolio page utilizing CSS. However, the current setup only displays an image when hovering over a title due to some limitations. Below is the CSS code used: .container_imd { position: relative; ...

jQuery - easily adjust wrapping and unwrapping elements for responsive design. Perfect for quickly undo

Within the WordPress PHP permalinks and Fancybox plugin, there are elements enclosed in an "a" tag like so: <a href="<?php the_permalink(); ?>" class="example" id="exampleid" data-fancybox-type="iframe"> <div class="exampledivclass"> ...