Achieving both vertical and horizontal center alignment specifically for mobile devices

Is there a way to center a column on mobile devices only while maintaining a fixed height for the section?

<div class="" style="background-image: url(image url;); background-position: right bottom; background-size: cover; height: 462px;">
<div class="container">
  <div class="row h-100">
    <div class="d-md-block d-none col-md-5" style=""><img class="img-fluid mx-auto d-block" src="image url"></div>
    <div class="col-12 my-auto col-md-7">
      <h1 class="display-4">Display 4</h1><a class="btn btn-primary" href="#">Button</a>
    </div>
  </div>
</div>

Any suggestions on how I could make this work?

twitter-bootstrapcssbootstrap-4center

Answer №1

Are you interested in diving into the world of FlexBox? It's a powerful tool for easily centering items, whether horizontally or vertically. Just surround your code with a parent div and apply the following CSS properties:

display:flex; 
align-items: center; //For horizontal centering
justify-content: center; //For vertical alignment

Here's an example to get you started: https://jsfiddle.net/jvknog1d/

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 462px;
}
<div class="parent">
  <div class="" style="background-image: url(image url;); background-position: right bottom; background-size: cover; ">
    <div class="container">
      <div class="row h-100">
        <div class="d-md-block d-none col-md-5" style=""><img class="img-fluid mx-auto d-block" src="image url"></div>
        <div class="col-12 my-auto col-md-7">
          <h1 class="display-4">Display 4</h1><a class="btn btn-primary" href="#">Button</a>
        </div>
      </div>
    </div>
  </div>

Answer №2

Consider using "@media only screen" in your CSS to adjust settings based on different screen resolutions.

.mysection{
background-image: url("https://via.placeholder.com/728x462.png?text=placeholder"); 
background-position: right bottom; 
background-size: cover; 
height: 462px;
}

@media only screen and (max-width: 600px) {
  .mysection {
    text-align : center;
  }
}
<div class="mysection">
<div class="container">
  <div class="row h-100">
    <div class="d-md-block d-none col-md-5" ><img class="img-fluid mx-auto d-block" style="border: 1px solid;" src="https://via.placeholder.com/200x200.png?text=image"></div>
    <div class="col-12 my-auto col-md-7">
      <h1 class="display-4">Display 4</h1><a class="btn btn-primary" href="#">Button</a>
    </div>
  </div>
</div>

To learn more, feel free to visit this link.

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

Enhance your website's visual appeal with the Bootstrap-4 album card display feature that

I was inspired by the card concept found at https://getbootstrap.com/docs/4.0/examples/album/ to create a similar layout. However, I don't want to display all my cards at once as it could overwhelm viewers with 100 cards. Has anyone developed a JavaS ...

bootstrap-4

Unable to append Jquery attribute to a div component

My code snippet is creating a div with specific classes and elements: '<div class="ctrl-info-panel col-md-12 col-centered">'+ '<h2>You do not have any projects created at the moment.</h2>'+ '<div id="t ...

javascriptjqueryhtmlcss

Ensure that FlexBox Columns have a height of 100% and vertically align their content

Having scoured through numerous questions and answers, I'm still stuck on why I can't achieve 100% height for certain flexbox columns. Specifically, trying to make the "Genre" column with one line of text match the height of the "Song & The A ...

cssflexbox

The overlay is larger in size compared to the video positioned beneath it

I'm having trouble placing a video underneath a purple layer as the overlay isn't aligning properly with my video. After removing the background-size: cover; in the home section, it appears like this: .videoContainer {} .videoContainer .over ...

htmlcss

Adjust column content to fit width, instead of setting width to 100%

To create columns for the ul, I used flex-direction: column and flex-wrap: wrap. When the elements within the ul are split into multiple columns, each column takes on the width of the widest content in that column. However, if there is only one column, it ...

htmlcssflexbox

How to completely color a div in CSS

<h:head> <title>Unique Title</title> <style> .top{ margin: 0; padding: 0; background-color: blue; height: 15px; width: max-content; } </style ...

htmlcss

jquery hover effect not functioning properly

I have a question regarding my jquery mobile application. I am trying to implement a hover effect on items with the class grid-item, where the width and height change simultaneously in an animation. Here is the code snippet I am using: $('.grid-i ...

javascriptjqueryhtmlcsshover

When viewing HTML emails in dark mode on iOS Gmail, the CSS appears to be inverted

While sending an HTML email from a nodejs app, I encountered an issue with Gmail on iOS where elements with background-color or color properties were getting reversed. This was most noticeable on black and white elements. Despite consulting various guides ...

htmlcssnode.jsemailgmail

Is it possible to modify the underline color while using the transition property in CSS?

One of the challenges on my website is customizing the navigation bar to resemble the BBC navigation bar. I want to change the border bottom/underline color using transition elements. Can anyone provide guidance on modifying the code to achieve this look? ...

csscolorscss-transitionstransition

What is the best way to ensure a division's height matches that of the window using CSS?

Is it possible to create a division that covers the total width and height of the screen using just CSS without relying on JavaScript or jQuery? <div id="all"></div> I have tried setting the width and height of the element to 100%, but I am s ...

htmlcssheight

What could be causing the discrepancy in alignment of my hyperlink?

I noticed that in this example the hyperlink is aligned at the bottom compared to the text. Can anyone help me identify the issue and provide a solution? Thank you! ...

htmlcss

Is it possible to retrieve a callback function from a select event in the Bootstrap dual listbox?

I'm fairly new to front-end development and have been using the Bootstrap DualListbox for a project. I'm looking for a way to save items moved from one list to another to a database before they are officially transferred. Is there a callback func ...

javascriptjquerytwitter-bootstrap

Is it better to overwrite past values in CSS or to duplicate rules?

Which one of these CSS code practices is considered better? A - concise and rewritten: @media only screen and (min-width: 480px) and (max-width: 960px) { h1, h2, .header, .widget, .copyright { position: static; width: 100%; height: auto; ...

csscode-cleanup

What is the process for customizing the arrow of a <select> dropdown menu exclusively?

Here is the code for a dropdown menu: <select id="dropdown"> <option value="">Go to page...</option> <option value="http://stackoverflow.com">CSS-Tricks</option> <option valu ...

javascriptjquerycssxhtml

Is there a way to confirm if all div elements have a designated background color?

I have a scenario where I have dynamically added several divs with a specific class to my webpage. These divs change color when the user hovers over them. I am trying to trigger a specific function once the last div has been set to a particular backgroun ...

javascriptjqueryhtmlcss

Deactivate Date Field for Editing Orders in WooCommerce

Is there a way to deactivate the Date Created textbox on the Edit Orders page of Woocommerce? I attempted to use pointer-events: none; but unfortunately, it did not have any effect. I am seeking a method to disable the Date Created field. ...

javascriptcsswordpresswoocommerce

MUI version 5 - Keep styling separate from component files

Seeking to segregate styling from component File in MUI v5. In the past, I accomplished this in v4 by utilizing makeStyles as shown below: Page.style.js: import { makeStyles } from "@material-ui/core"; export const useStyles = makeStyles({ ro ...

cssreactjsmaterial-ui

Using Font Awesome Class Aliasing

Is there a way to create an alias for a Font Awesome class like fa fa-users, and then switch between classes dynamically? I'm working on a project where I need to use Font Awesome icons, and currently I have the following code: <i class="fa fa-us ...

cssfontsextjs4font-awesome

Foundation 5.2.2: Creating a Dropdown Menu

Would it be possible to achieve this effect using Foundation: https://i.stack.imgur.com/UyYqK.png ? I am interested in implementing 2 COLUMNS in the TopBar Menu: foundation.zurb.com/docs/components/topbar.html I came across a MegaMenu (codepen.io/winghou ...

htmlcssnavigationzurb-foundationnavbar

Steps for incorporating Bootstrap 5 pagination without using jQuery

Currently, I am working on incorporating pagination for cards using Bootstrap 5. My reference point is the following link: https://getbootstrap.com/docs/5.0/components/pagination/ While I can find the UI elements, I am struggling to come across a concrete ...

htmlcsspaginationbootstrap-5