Achieving horizontal or vertical alignment of columns in Bootstrap 4 based on viewport size

Here is the layout I am working with -

.left {
  height: 100vh;
  background-color: #208ea3;
}

.right {
  height: 100vh;
  background-color: #37a862;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" color="green">
  <div class="row justify-content-md-start">

    <div class="col-lg-3 left d-flex align-items-center justify-content-center" id="first-section">
      <div class="text-center">
        <div class="row-fluid align-items-center justify-content-center h-100">
          <div class="col-xl-6" id="dynamic-columns">
              some quotations
          </div>

          <div class="col-xl-6" id="dynamic-columns">
            <h3>title</h3>
              Some text  
          </div>
        </div>
      </div>
    </div>

    <div class="col-lg-9 right" id="next-section">
      more text
    </div>

  </div>
</div>

I am in need of setting properties for #dynamic-columns so that when the screen has a max-height of 500px, the columns expand to take up 100% of the height and line up horizontally. Currently, they do not align side by side, causing the lower #dynamic-columns to be obscured by #next-section if it contains additional text.

I require this adjustment due to the limited vertical space on many mobile phones in landscape orientation, restricting the ability to display the content in #first-section vertically. Therefore, I aim to position them horizontally, with the first #dynamic-columns on the left and the second on the right.

I have realized that a specific query will be necessary, but I am unable to identify the exact properties needed -

@include (max-height:500px) {
  #dynamic-columns {
      display: ??
    }
    
}

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To achieve this, you can follow the method below. I made sure to update the bootstrap version to 4.5 in order to utilize the vh-100 class properly.

.left {
  background-color: #208ea3;
}

.right {
  background-color: #37a862;
}

@media (max-height:500px) {
  .left > div {
      height:100%;
      width:50%;
    }
    
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" color="green">
  <div class="row">
    <div class="col-lg-3 vh-100 left d-flex flex-column flex-wrap justify-content-center text-center" id="first-section">
      <div class="d-flex flex-column justify-content-center">
        some quotations
      </div>
      <div class="d-flex flex-column justify-content-center">
        <h3>title</h3>
        Some text
      </div>
    </div>
    <div class="col-lg-9 vh-100 right" id="next-section">
      more text
    </div>

  </div>
</div>

Answer №2

After some exploration, I've uncovered a clever CSS solution that may be just what you're looking for. This could be the missing piece to your puzzle. One key difference noticed was your use of @include instead of @media.

* {
  margin: 0;
  padding: 0;
}

.flex-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.flex-container div {
  flex-grow: 1;
  color: white;
}

.column-1 {
  background: teal;
}

.column-2 {
  background: blue;
}

@media (max-height: 500px) {
  .flex-container {
    flex-direction: row;
  }
}
<body>
  <div class="flex-container">
    <div class="column-1">Column 1</div>
    <div class="column-2">Column 1</div>
  </div>
</body>

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

Show the date and time in a visually appealing way by using HTML and JavaScript in an HTA application with scrolling effects

I have the following JavaScript code to show the current date in the format Mon Jun 2 17:54:28 UTC+0530 2014 within an HTA (HTML application). Now, I would like to display it as a welcoming message along with the current system date and time: Mon Jun 2 17: ...

javascriptcsshtmlhta

What is the best way to choose all elements except for <body>? Alternatively, how can <body> be styled to its default appearance?

Web browsers often apply default styles to different elements, but users have the option to override these defaults using custom stylesheets. I personally like to customize these default styles with my own, for example: * {padding:0; margin:0; } However ...

csscss-selectorsuserstyles

Create a basic chart using JavaScript

I am looking to replicate a specific chart using JavaScript. The red point in the chart is variable. So far, I have attempted to create it using the flot library: var d3 = [[7,7]]; $.plot("#placeholder", [{ data: d3, points: { show: true } }], { ...

javascripthtmlplotchartsdraw

Animating distance with the power of animate.css

I have implemented animate.css for a login form, but it is not behaving as desired. Currently, I am utilizing the fadeInDown animation, however, it is fading in from a greater distance than intended. I would prefer it to fade in from just around 20px below ...

htmlcssanimationanimate.css

Creating a unique button design that incorporates a select tag and utilizes a dynamic percentage width

How can I keep a custom button positioned 20 pixels away from the right side of a select dropdown menu with a fixed width percentage? Using percentages in the background-position property makes the button move too far when the window is large. Setting the ...

htmlcss

What is the best way to adjust the textfield's size proportionally to its parent accordion when the window is resized?

Inside an accordion, I placed a text field with specific widths and heights. However, when I resize the browser window, the accordion width changes proportionally to the window size while the text field width remains the same. This causes the text field to ...

cssreactjstypescriptmaterial-ui

IE6 is not displaying the tag styles correctly

My website has a section that shows two links next to each other. While it's displaying correctly on most browsers, it seems to have issues specifically in IE6. You can view the issue on this fiddle. Can anyone shed some light on why this is happenin ...

htmlcssinternet-explorer-6

Is there a way to utilize the function body onload in jQuery?

I have some code that needs to be fixed. Currently, when I see <body onload="start()" onresize="resize()" onorientationchange="resize()">, I want the following code snippet to work: $("button").click(function(){ $("body").onload = start; or win ...

javascriptjqueryajaxhtml

Control other inputs according to the chosen option

Here is the HTML code snippet: <fieldset> <label for="tipoPre">Select prize type:</label> <select id="tipoPre"><option value="Consumer Refund">Consumer Refund</option> <option value="Accumulated Prize Ref ...

javascriptjqueryhtml

Steps for adding information to a sub tag within an XML document

Imagine having this example tag <root> <foo> </foo> </root> with the following html form <form action="foo.php method="post"> <input type="text" name="something"> <input type=" ...

phphtmlxml

Troubleshooting: CSS Pseudo :after doesn't apply to an anchor tag

I've created a pseudo CSS style for an anchor tag, which was working fine before. However, for some reason, it's no longer working. I tried using Chrome inspect element to add the CSS but it's not being read by the anchor tag. @font-face ...

htmlcsspseudo-element

What is the process to retrieve a variable from a Node.js file in an HTML document?

What is the best way to showcase a variable from a node.js route in an HTML File? I have a node.js route structure as follows: router.post("/login", async (req,res) => { try { const formData = req.body const name = formData.name ...

javascripthtmlnode.js

Understanding the behavior of Bootstrap input-groups when containing hidden sub elements

In a scenario where a button and an input field are enclosed within a div with a bootstrap class named input-group, they expand to occupy the entire width of the enclosing element. However, if the button is hidden, the input field unexpectedly contracts to ...

javascripthtmlcsstwitter-bootstraptwitter-bootstrap-3

What is the best way to dynamically adjust the top CSS of an element when it is positioned at the top or

Is there a way to dynamically set the top CSS when an element is over the top or bottom of a page? First, hover over the first cat image. It's working fine. http://image.ohozaa.com/i/480/7YpWei.jpg When I scroll the page to the bottom and hover ove ...

javascriptjqueryhtmlcss

What is the best way to place a popover above a selected text section?

Imagine a situation where a body of text is present. When a word is highlighted within this text, a popover should appear with a tooltip positioned directly at the highlighted word. Think of it as similar to how a Mac displays definitions of words within ...

javascriptjquerycssangularjsangular-ui

Avoid positioning issues when dropping a DIV onto the Canvas

Utilizing the JavaScript code below allows me to drag a DIV onto a canvas. I am currently loading a multi-page PDF, which consists of image files, in a pop-up window and positioning canvas layers over them. In these canvas layers, shapes are then loaded at ...

javascripthtmlhtml5-canvasfabricjs

Overflow and contain a flex item within another flex item

I am facing a challenge where I need to prevent a flex-child of another flex-child from overflowing the parent, ensuring it does not exceed the screen height or the height of the parent (which is also a flex-child). Here's the CodePen link for refere ...

htmlcssvue.jsflexboxvuetify.js

Initially unchecked Django Model Boolean Field with initial=False and required=False does not seem to be functioning as intended

Forms.py class CustomPostedForm(forms.ModelForm): posted = forms.BooleanField(required=False, initial=False) Views.py postform = CustomPostedForm(request.POST, instance=author) if postform.is_valid(): postform.save() ...

htmldjangodjango-modelsdjango-forms

Is it possible to utilize both Tailwind CSS and Bootstrap 4 simultaneously?

I am working on a project with Vuejs that utilizes BootstrapVue components, which appears to be using Bootstrap 4 css. However, I want to incorporate Tailwind css for new custom components. Can both libraries be used simultaneously in the project? Thank ...

vue.jsbootstrap-4vue-componenttailwind-css

After using `setAttribute`, React is unable to produce any audio

Currently, I am facing an issue with a React component where it should play sound from an array of IDs stored in the database by setting the ID to the src attribute for the source tag. However, this functionality is not working as expected. Interestingly, ...

javascripthtmlreactjsdom