`Center the image on top of the text`

Currently, I am working with Bootstrap 4 to create a component that includes two tiles. Each tile has an icon image on the left side and a hyperlink on the right side. On desktop view, the tiles should be displayed horizontally and vertically centered. However, when the view changes to mobile, the image icon should stack over the link while remaining vertically centered.

<!doctype html>
<html lang="en>
  <head>
    <!-- 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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn53...

I have encountered some issues:

  1. How can I vertically center the image over the text in mobile mode?
  2. The `service-header-tile` div does not seem to act as a parent element of `leftContent` and `rightContent`. When inspected, this div lacks width or height. What could be causing this issue?
  3. Any suggestions for enhancing the code are welcome.

Thank you, Bee

javascripthtmlcssbootstrap-4

Answer №1

Is there a way to center the image vertically over the text on mobile mode?

If you want to horizontally center the image over the text, consider using the .text-center class on the image's parent element or utilize bootstrap's flexbox utility classes like .justify-content-center.

The 'service-header-tile' is not functioning as the parent of 'leftContent' and 'rightContent'. Upon inspecting the element, it seems that this div lacks width or height. What could be causing this issue?

This 'service-header-tile' is indeed the parent element with a fixed height of 60px as defined in your internal CSS. You may need to remove this fixed height declaration to prevent overflow from the child elements within the '.service-header-tile' container.

Here are some recommendations to enhance the code:

  1. Avoid inline CSS and instead opt for an external stylesheet if necessary for overriding Bootstrap styles.
  2. You can eliminate your custom CSS since Bootstrap provides all necessary classes for achieving desired layouts.
  3. Utilize Bootstrap's flexbox utility classes for proper alignment. Refer to this link for more information.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container" style="background: #41173F;">

  <div class="row">

    <div class="col-4 col-md-4">

      <div class="service-header-tile text-center d-flex flex-column flex-md-row align-items-center">
        <div class="leftContent mr-md-3">
          <picture>
            <source media="(max-width:767px)" srcset="https://i.postimg.cc/52LJtH2P/virtual-appoinment-m-icon-2x.png" />
            <img src="https://i.postimg.cc/rmJFwDQ6/book-appointment.png" srcset="https://i.postimg.cc/RV0qqLkg/book-appointment-2x.png 2x" class="stretch object-fit " />
          </picture>
        </div>

        <div class="rightContent pb-2">
          <a href="#">Play Virtual Applications</a>
        </div>
      </div>

    </div>

    <div class="col-4 col-md-4">

      <div class="service-header-tile text-center d-flex flex-column flex-md-row align-items-center">
        <div class="leftContent mr-md-3">
          <picture>
            <source media="(max-width:767px)" srcset="https://i.postimg.cc/52LJtH2P/virtual-appoinment-m-icon-2x.png" />
            <img src="https://i.postimg.cc/rmJFwDQ6/book-appointment.png" srcset="https://i.postimg.cc/RV0qqLkg/book-appointment-2x.png 2x" class="stretch object-fit " />
          </picture>
        </div>

        <div class="rightContent pb-2">
          <a href="#">Play Virtual Applications</a>
        </div>
      </div>

    </div>

  </div>

</div>

Answer №2

Consider utilizing the power of flex, which has been a game-changer since its introduction in CSS 3.

To better understand how it works, check out this quick demo I created: https://jsfiddle.net/8jw4mbu5/

If you need to adjust layouts based on screen size, incorporating a media query for toggling flex-direction between column and row can be extremely useful.

Explore more flex properties and their effects by referring to this comprehensive cheatsheet:

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

Issue with uneven spacing on both ends of the screen on mobile devices

I have successfully used a <div style="margin:0 auto; "> tag with the specified property, working perfectly. However, I added another <div> above and set the float as follows: .gallery-div{ background:url(images/gallery-bg.png) repeat-y; ...

htmlcsscss-float

Animate your menu on hover with jQuery!

I am experiencing an issue with centering the background image below a link. When using mouseleave, the image does not return exactly to the center of the list. Any assistance on how to resolve this would be greatly appreciated. Thank you! Here is the ref ...

jqueryhtmlcss

The jQuery .load method is having trouble loading a local HTML file within a Cocoa WebView

Having an issue with my Cocoa WebView where I'm attempting to load a local HTML file using jQuery.load(). My code snippet looks like this: $("#mydiv").load("test.html"); // The test.html file is located within the app's bundle Although no exce ...

javascriptjqueryhtmlmacoscocoa

Dynamic content display using AJAX

Having already tried to find a solution through Google with no success, I am at a loss. I have articles where a paragraph is initially displayed, followed by a "read more" link which reveals more content using JavaScript. However, this approach may slow do ...

phpjavascripthtmlajax

Having trouble with triggering a Material UI modal from a Material UI AppBar on a Next.js page

As a newcomer to the world of React.js and Next.js, I am encountering difficulties when trying to open a Material UI modal from a Material UI AppBar within a Next.js page. Most of the code I have implemented here is directly copied from the Material UI we ...

javascriptreactjsnext.jsreact-hooks

Is it possible to enlarge the window screen using css?

After using zoom at 90%, everything was working fine until we introduced high charts. The hovering property doesn't display in the correct position. Looking for a solution to show a zoomed window on a small screen, like a laptop screen. Does anyone h ...

htmljquerycss

Configure environment variables for either grunt or grunt-exec

Attempting to utilize grunt-exec for executing a javascript test runner while passing in a deployed link variable. This is being done by initializing an environment variable grunt.option('link') with the help of exec:setLink. Within my test_runn ...

javascriptnode.jsgruntjsgrunt-exec

Enhancing React components with dynamic background colors for unique elements

I am encountering an issue while using a map in my code. Specifically, I want to set the background of a particular element within the map. The element I am referring to is "item .title". I aim for this element to have a background color like this: https:/ ...

javascriptcssreactjsreduxreact-redux

How can I incorporate margins or adjust scaling within dompdf?

After creating a PDF using dompdf with the paper size set to A6, I am experiencing issues when trying to print it on A4 and letter paper sizes. The left and top borders are being cut off. Is there a way to generate a PDF that is compatible with A4, A6, l ...

phphtmlcssmagentodompdf

"Discover the process of sending a JSON value from a PHP page to an HTML page using AJAX, and learn how to display the resulting data

I am currently validating an email ID using PHP and AJAX, with the intention of returning a value from the PHP page to the HTML in JSON format. My goal is to store this return value in a PHP variable for future use. All of this is being executed within C ...

javascriptphpajaxjsoncodeigniter

What is the best method for testing routes implemented with the application router in NextJS? My go-to testing tool for this is vitest

Is it possible to test routes with vitest on Next.js version 14.1.0? I have been unable to find any information on this topic. I am looking for suggestions on how to implement these tests in my project, similar to the way I did with Jest and React Router ...

javascripttestingnext.jsvitestapp-router

Display the spinner until the data is successfully updated in the DOM using Angular

Dealing with a large dataset displayed in a table (5000 rows), I am attempting to filter the data using column filters. When applying the filter, I have included a spinner to indicate that the filtering operation is in progress. However, due to the quick ...

javascripthtmlangularfilter

What is the process for specifying a specific font family in CSS?

Despite setting my text to font-family: Times New Roman, I'm seeing a different font in my Chrome browser. Here is the relevant HTML code: <p style="color:#F17141;font-size: 120px; font-family: &quot;Times New Roman&quot; ; font-weight: b ...

htmlcss

Replace text using the str_replace function

I have a total of seven lines of text that I need to manipulate using PHP. My first task is to filter out any lines that do not contain the word 'MARCO1998'. Next, from the remaining lines, I need to extract only the 1-3 numbers that come after ...

phphtml

Using PHP's include/require method with a dynamic path

Looking for assistance with my issue! Ajax is returning the correct information and displaying it in an 'alert(html)' on 'success'. The PHP code echoes $idName and $path correctly on the carrier page where the code resides. There are no ...

javascriptphphtml

Using jQuery to smoothly scroll to a position determined by a custom variable

Here's the script I am working with: $('.how-we-do-it .items div').on('click', function () { var $matchingDIV = $('.how-we-do-it .sections .section .content div.' + $(this).attr('class')); $matchingDIV. ...

javascriptjqueryscroll

How to fetch React route parameters on the server-side aspect

I encountered a challenge while working with ReactJS and ExpressJS. The user uploads some information on the /info route using React and axios. Then, the user receives route parameters from the server side to redirect to: axios.post('/info', Som ...

javascriptnode.jsregexreactjsexpress

Enhance your viewing experience by magnifying a specific element, all while maintaining full control to navigate

Is it possible to create a zoom effect on a webpage that focuses on one specific element while still allowing for navigation and scrolling? I have searched online for plugins like Fancybox and Zoomooz, but none of them offer the functionality I need. I sp ...

javascriptjqueryhtmlcss

Looking to display an input field when a different option is chosen from the dropdown menu?

I'm currently utilizing ng-if to toggle the visibility of an input box. However, whenever I refresh the page, the input box automatically appears and then hides after selecting an option. Below is my code snippet. Any suggestions would be greatly appr ...

javascriptangularjsionic-framework

Steps for adding a forked version of a library in package.json

Recently, I came across a React JS library called React Pacomo. Since the original version of this library is no longer being maintained, I decided to use my own forked version for my project. However, I am facing issues with compiling or building the libr ...

javascriptnode.jsreactjsnpmpackage.json