Can you provide instructions on how to vertically adjust a bootstrap div?

Here is the code snippet:

 <div class="container">
        <div class="row">
            <div class="container1 col-lg-4 col-md-4 col-sm">
                <h1 class="status">Status:</h1>
            </div>
            <div class="container2 col-lg-6 col-md-8 col-sm-6 text-sm-left">
                <span class="open"><?php include 'opent-stengt.php'?></span>
            </div>
        </div>
        <div class="container3 row col-md-9">
            <p class="info"><?php include 'status.php'?></p>
        </div>
        <div class="container4 row col">
            <span class="buttonfix mt-4"><a class="button1">Sist oppdatert:<?php include 'time.php'?></a></span>
        </div>
    </div>

I want to adjust the position of the text by moving it down approximately 16% on desktop while ensuring it looks good on mobile devices as well. How can I achieve this? You can view my Codepen here: https://codepen.io/andve04/pen/MWwJbpb There seems to be a bug where the "open" element covers the "status" element when minimizing the window. Can you provide any guidance on how to fix this issue?

Your assistance is highly appreciated!

cssbootstrap-4

Answer №1

Take a look at the code snippet and provided link to see if it meets your requirements:

<div class="container w3-animate-bottom">
    <div class="row">
        <div class="container1 col-lg-4 col-md-4 col-sm">
            <h1 class="status">Status:</h1>
        </div>

    </div>
  <div class="row">
    <div class="container2 col-lg-6 col-md-8 col-sm-6 text-sm-left">
            <div class="open">OPEN</div>
    </div>
  </div>
    <div class="container3 row col-md-9">
        <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="container4 row col">
        <span class="buttonfix mt-4"><a class="button1">Last updated:<?php include 'time.php'?></a></span>
    </div>
</div>

Check the URL here: https://codepen.io/andve04/pen/MWwJbpb

Answer №2

To adjust the text size accordingly, utilize media queries in your coding. Here is a comprehensive example featuring all necessary media queries:

/**
 * XL
 * ---------------------------------------------------------------- */
@media (min-width: 1200px) {

}

/**
 * LG
 * ---------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199px) {
  .open {
    font-size: 80px;
  }
}

/**
 * MD
 * ---------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {

}

/**
 * SM
 * ---------------------------------------------------------------- */
@media (min-width: 576px) and (max-width: 767px) {
  .open {
    font-size: 80px;
  }
}

/**
 * XS
 * ---------------------------------------------------------------- */
@media (max-width: 575px) {

}

If you need to reposition the text lower on the page, you can achieve this by adding the following CSS code:

.container {
    margin-top: 16vh;
}

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

Is there a way to prevent elements on a web page from shifting when the page width becomes narrow enough?

Currently, as I delve into the world of web development with Svelte, I am in the process of creating a basic website to put my knowledge to the test. The main aim is to ensure that no matter how much the page is resized, the text and video content remain e ...

javascripthtmlcsssvelte

What could be causing the bottom shadow of a row to disappear when the row is hovered over?

I've been using the datatable and noticed that when I hover over a row, the bottom shadow doesn't appear. Why is only the right and left shadows displayed? table.dataTable tbody tr:hover { background-colo ...

htmlcssbootstrap-4

changing font size on a mobile-friendly site using javascript

Currently, I am designing a responsive webpage utilizing Bootstrap framework. Situated in the center of the screen is a text that reads: <p id="entershop" ><a class=no-deco href="shop.html">enter shop</a></p> Within the Bootstra ...

javascripthtmlcssbootstrap-4screen-size

Unable to vertically align radio buttons

Using Bootstrap 4, I want to create a list of three radio buttons. Here is the HTML structure I have tried: <div class="mt-3 text-center"> <div class="custom-control custom-radio"> <input type="radio" id=& ...

htmlcssbootstrap-4

Issue with Flex property not being supported in Safari browser

.rq-search-container { position: relative; width: 100%; background: white; display: flex; flex-direction: row; align-items: flex-start; border-radius: 2px; z-index: 30; -webkit-flex: 1 0 15em; } While this code functi ...

javascripthtmlcsssafariflexbox

Creating a Slack-inspired interface with a Bootstrap 4 fixed bottom message box nested within a column

I'm attempting to create an interface similar to Slack, featuring a message box fixed at the bottom using Bootstrap 4. However, when I use the fixed-bottom class (where my custom message-box col is located), it spans the entire width of the window, wh ...

htmlbootstrap-4

Is there a way to modify the default color when the header is assigned the "sticky" class?

Currently, I am in the process of building my own website and have implemented an exciting hover effect that randomly selects a color from an array and applies it when hovering over certain elements. However, once the cursor moves away, the color reverts b ...

javascripthtmljquerycssarrays

Bootstrap 4: Arrange input fields in a horizontal layout

I'm a newbie when it comes to Bootstrap 4 and could use some guidance. I'm looking to have my first two input fields aligned horizontally on the same line, instead of stacked on top of each other. Something like this: check out the image here B ...

htmlcssbootstrap-4

I am interested in implementing a "slide up" effect for the "slide menu" when it loses focus

When I focus out of the asmenu class, I attempt to trigger a 'slide up' effect. However, if I select two checkboxes from the child elements within the asmenu class, the focusout event is still triggered. Ideally, I would like the 'slide up& ...

javascripthtmljquerycss

Is there a way to automatically determine the text direction based on the language in the input text?

When posting in Google Plus (and other platforms), I noticed that when I type in Persian, which is a right-to-left language, the text direction changes automatically to rtl and text-alignment:right. However, when I switch to English, the direction switches ...

javascripthtmlcssbidi

The slick jQuery plugin seems to be malfunctioning

I recently downloaded the jQuery files in order to implement some image sliders on my website, but unfortunately, they are not functioning properly. Is there anyone who can help me identify any issues with the code? Thank you in advance. <body> ...

javascriptjquerycss

Issue with iPhone CSS displaying differently on mobile devices

The CSS design does not display correctly on iPhone devices in real-life testing, even though it appears fine on browsers with mobile view emulators. Interestingly, the design also looks great on Android phones but encounters issues specifically on iPhones ...

javascripthtmlcsstwitter-bootstrap

Creating a Responsive Bootstrap Card

Is there a way to make this responsive without using media queries? I'm currently working with Bootstrap cards, but when I resize the page, they overlap. I think my CSS might be causing the issue. Here is the code for both the CSS and the body. Thank ...

htmlcssbootstrap-4

Incorporate Arabic typography into the React Material Theme

My goal is to utilize the Noto Sans Arabic font within my React material UI theme. Everything seems to be functioning correctly, including overrides. Despite consulting the React Material UI documentation and attempting to follow similar steps as outlined ...

htmlcssreactjsmaterial-ui

Adjusting the placement of elements according to the size of the screen?

I'm facing a very specific issue with my web page design and I need some ideas on how to solve it. The current structure of the page looks like this: <div class="row"> <div id="home-img" class="col-6"> ******An Image Goes He ...

htmlcssbootstrap-4flexbox

Styling text of various sizes to appear together in a div container

I'm having trouble getting my text to align in a single line. I've tried using vertical-align: middle and vertical-align: bottom... Can someone please assist me? http://jsfiddle.net/2wDEw/ Here is a simple example of what I have: ...

htmlcss

Having trouble with overriding an @media query for material-ui react components?

I've been trying to modify a @media CSS rule on a Material UI component, similar to the discussions on How to over-ride an @media css for a material-ui react component and Override components like MuiTab that use media queries. However, I have not bee ...

javascriptcssreactjsmaterial-uimedia-queries

The rotation feature for legends in Highcharts does not function properly on Internet Explorer 10 and 11 if the document mode is

When using Internet Explorer 10 or 11, rotation works perfectly fine if we select edge mode, as shown in the image. This information was taken from the High Chart Demo Charts. However, if we select Document mode 8 in IE 10 or IE 11, the rotation does not ...

javascriptcssinternet-explorerhighcharts

Achieving perfect alignment both horizontally and vertically using CSS3's viewport height of 100%

I'm trying to utilize CSS3's Viewport Height to create a fullscreen section with a height of 100vh. However, I am encountering difficulties in centering elements both horizontally and vertically within the section. My goal is to have an image and ...

htmlcss

Create a situation where a span intersects with an "overflow" element

I have come across an issue with my webpage. I am utilizing a menu of icons on the left side, and it shows a span when I hover over an icon. Since my list is quite long, I want it to display a scrollbar if the window size is smaller: overflow-y: auto; ove ...

htmlcss