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

Elements featured in the header: logo, tagline, graphics, and more

I'm interested in designing a schema with the following elements: I'm contemplating whether it would be beneficial to have a separate container for the logo and slogan. Additionally, I am considering if it is advantageous to create a container f ...

css

Flickering in CSS transitions on Microsoft Edge

There seems to be a peculiar issue with CSS transitions in Microsoft Edge. The problem arises when there is a transition, such as between hover states, but the styles specified for those states are overridden by other styles in the CSS hierarchy. In such ...

csscss-transitionsmicrosoft-edge

What is the best way to create square editor tabs in Eclipse without using swt-border-radius?

The design of Eclipse's rounded and/or swooshing tabs is starting to feel outdated in today's modern era. I thought that by adding the following line in my default.css file, I could get rid of the rounded corners: swt-corner-radius: 0px Howeve ...

javacsseclipseswteclipse-rcp

incorrect text alignment issue on mobile devices, potentially limited to iOS as Android has not been tested

I am experiencing an issue with the alignment of two forms on my webpage when viewed on iOS devices such as iPhone and iPad Safari. Strangely, the forms display correctly on computers (Windows and even Mac with Safari), but on mobile devices the inputs are ...

htmlcssios

The jQuery script is functioning flawlessly in one specific direction

Currently, I am utilizing a basic script to alter the color of elements based on the div being hovered over. While this works smoothly in one direction down the line, when trying to reverse order and backtrack, the colors do not function as intended. The ...

javascriptjqueryhtmlcss

Is there a way to specifically style the element I am hovering over with Tailwind Typography and prose?

Currently, I am customizing my markdown pages with Tailwind typography and prose. I am facing an issue where the hover effect is being applied to all images at once instead of just the one being hovered over. Any ideas on how to fix this? Here is a snippe ...

cssfrontendtailwind-cssmarkdown

What is the method for eliminating the box shadow on a table?

Seeking assistance on removing the shadow effect from ng-tables upon hovering. Can someone guide me on how to achieve this? See screenshot here: http://prntscr.com/jcpl5g widget-body { background-color: #fbfbfb; -webkit-box-shadow: 1px 0 10px 1px rgba(0, ...

htmlcssangularjsngtable

The presence of whitespace is causing disruptions in the text alignment within div elements

I've noticed some unwanted white space on my website when viewing it in Chrome and Internet Explorer. It's interrupting the flow of text and I can't figure out where it's coming from. Can someone help me locate and remove this pesky wh ...

htmlcssdom

ng2-table ways to customize the appearance of a particular row

Hey there, I'm currently new to Angular 2 and working with ng2-table. I've successfully added a table like the one shown here to my website. Now, I'm trying to figure out how to add color to specific rows within the table. Following the ste ...

htmlcssangulartypescriptng2-bootstrap

CSS Flexbox: Dealing with Overlapping Flex Items on Narrow Screens

Hey there! I've successfully created a custom timeline using flexbox, but I'm encountering an issue on smaller screens. As the window size decreases, the flex items start to overlap. Is there a way you can assist me in adding some space without d ...

cssflexboxoverlaptimeline

Tips for displaying a title within the border of a div

We have a client who is asking for a unique feature on their new website - they want the title to appear within the border of a text area. We need help figuring out how to achieve this using CSS/HTML. Take a look at the effect we are trying to create: htt ...

htmlcssbordertitle

A layout featuring a grid of 3 rows and 2 columns, each containing 6

Is there a more effective method to construct this 3x2 "table" using DIVS? I'm considering using traditional tables code <table> since it's simpler, but modern practice leans towards Divs. So, what is the most polished approach to achiev ...

htmlcssgrid-layout

Desktop Safari displays Font-awesome icons with trimmed corners using a border-radius of 50%

While working on incorporating font awesome share icons into my project, I encountered an issue with getting a circle around them. After exploring various approaches, I opted for a CSS solution. Using React FontAwesome posed some challenges that led me to ...

javascriptcssreactjsborderfont-awesome

Steps on modifying the background of an element based on its location within the browser:

In the past, I've come across some impressive one-page websites with elements that would appear as you scroll. It seemed like they were created using just CSS. I think it might be achievable with the z-index and position properties? However, I can&ap ...

csswebz-index

Having trouble saving text in a textbox?

Is there a way to store text in a text box for future use? Every time I reload the page, the text in the box disappears. I have attempted the following solution: <td align='left' bgcolor='#cfcfcf'><input type="text" name="tx ...

javascriptcsshtml

Displaying an array value instead of a new value list in a React component

Situation - Initial number input in text field - 1 List of Items - 1 6 11 Upon removing 1 from the text field, the list becomes - New List Items - NaN NaN NaN Now, if you input 4 in the field. The updated List Items are - NaN NaN 4 9 14 Expected ...

javascripthtmlcssreactjsreact-usecallback

The variablewidth feature in Slick Carousel is malfunctioning

I've integrated slick slider 1.8.1 into my Rails app (v.5.2.0) and I'm encountering an issue with variablewidth set to true. My expectation was to achieve a layout similar to the example shown here: However, what's happening in my case is t ...

jqueryhtmlcssslick.js

Exploring PHP Queries with Div Classes

I'm in desperate need of assistance. I'm currently working on putting together a website and pulling data from a mysql database. The specific div that I'm trying to populate is provided below. The issue I'm facing is how do I integrate ...

phpjqueryhtmlmysqlcss

Creating an infinite scroll with a gradient background: a step-by-step guide

I am currently working on a project to develop an infinite scrolling webpage with a dynamic gradient background that changes based on the user's scroll position. While researching, I came across some code for infinite scrolling using time and date. I ...

javascripthtmlcssgradientinfinite-scroll

Troubleshooting: Custom checkbox using CSS ::before does not display properly on Firefox and Edge browsers

Encountering a frustrating CSS challenge while working on a project that needs to be compatible across various browsers. Specifically, I'm having issues with custom styling for checkboxes. Despite following recommendations to use a ::before pseudo-ele ...

htmlcsscheckboxcross-browserpseudo-element