Shifting the second column will raise all content and hide certain elements

Whenever I attempt to preview my page on mobile devices, the second column on the right moves under the first column as it should. However, the issue arises when the entire content on my site is pushed up, rendering the text (TAXI) invisible.

PC

Here's how it appears on a phone: PHONE

Below is the code for the columns. How can I resolve this issue?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="74161b1b00070006150434415a465a47">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <!-- your code here -->

I attempted a different approach using vh-100 which created a large blank space at the bottom of the page. See the issue here: space on the bottom 

<section id="top-page">
    <div class="top-page-image">
    </div>
</section>

<section id="mainpage">
    <!-- your code here -->
htmlcssbootstrap-4bootstrap-5

Answer №1

Utilizing the @media Rule within your CSS code is essential. By incorporating the @media rule into your stylesheets, you can effectively tailor your design to accommodate various media types and devices. This technique will enable you to eliminate any concerns or issues related to different device displays.

Answer №2

The issue was resolved by applying the @media rule height: auto;.

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

Prevent content from occupying unnecessary space below a sticky div

When the "link" on the sticky header is clicked in this scenario, how can I ensure that the linked content item (#mypara) appears below the sticky div rather than directly underneath it where it may be hidden? $(document).ready(function() { $(window ...

javascriptjquerycsscss-position

Is it possible for me to develop a mobile application using JavaScript, HTML, and CSS and distribute it for sale on the App Store, Google Play Store, and Microsoft Mobile App Store at

I have a keen interest in web standards such as Javascript, HTML, and CSS. My goal is to utilize these languages to develop applications for mobile devices like phones and tablets. I am also considering selling these applications on various platforms inclu ...

javascriptandroidhtmliphoneipad

Side Text for Floating Action Button

I've been working on incorporating labels to the left of my FAB, following the Material Design principles. Despite my efforts, I'm facing difficulties in getting the labels to display properly. I would greatly appreciate any advice or tips on how ...

htmlcsstwitter-bootstrapmaterialize

How can I control audio playback with just a click on an image on an HTML webpage?

I attempted to use a code from this website, but it doesn't seem to be working for me. I was hoping that someone here could lend a hand. The code I tried makes the song play when I click the gif image, but when I click it again, it just restarts. H ...

javascripthtmlimageaudio

When nearing the edge of the window, extend the submenu in the opposite direction

I've created a simple submenu using CSS, structured as an unordered list. It appears on hover by changing the display property to "block". <ul> <li><a href="#">item</a></li> <li><a href="#">item</a ...

jquerycss

Tips for incorporating a mail button to share html content within an Angular framework

We are in the process of developing a unique Angular application and have integrated the share-buttons component for users to easily share their referral codes. However, we have encountered an issue with the email button not being able to send HTML content ...

htmlangulartypescriptemailoutlook

Tips for adding a space before the footer in a document

Implementing a Top Navigation Bar with grey spacing Avoid having any extra space just before the footer: Organizing my Layout File ("navigation_top" refers to the black navigation bar at the top) %body = render "navigation_top" .main-content .cont ...

cssruby-on-railshaml

Unsuccessful passing of the popstate event in jQuery bind

Currently, I am working on a small demo using the History API, but I seem to be facing some challenges: $(window).bind('popstate', function(event) { console.log('pop: ' + event.state); }); When I click on the 'P ...

jqueryhtmlhtml5-history

The challenge with linking within Layerslider

Having some trouble with an external link to a specific layerslider slide (html version, NOT wordpress). Here is the webpage in question: After reaching out in the support forum, I was advised to use this javascript: <a href="javascript:void(0);" onc ...

javascriptjqueryhtmlslideshowdeep-linking

Utilizing Material UI tabs panel with customized CSS styling

Having trouble changing colors and CSS in the TAB PANEL using material-ui. Any tips or suggestions? :( It seems like useStyle and theme functions are not working as expected. I was able to modify other properties like scrollable, but colors seem to be fix ...

cssreactjsmaterial-uicss-tablesreact-css-modules

The Hamburger menu is displayed, yet it refuses to toggle

Currently, I am attempting to make the navbar collapse upon screen shrinking. While this has been successful, I have encountered an issue where the hamburger icon remains un-clickable after collapsing (it won't toggle). <!DOCTYPE html> <html& ...

twitter-bootstraptogglehamburger-menubootstrap-5

Delete the span element if the password requirements are satisfied

I am implementing password rules using span elements. I aim to dynamically remove each span that displays a rule once the input conditions are met. Currently, I have succeeded in removing the span related to the minimum length requirement but I am unsure h ...

javascripthtmlangularjsregex

Pause animation when hovering over their current positions

I am working on a project with two separate divs, each containing a circle and a smiley face. The innercircle1 div is currently rotating with a predefined animation. My goal is to create an effect where hovering over the innercircle1 div will pause its rot ...

javascripthtmlcss

What is the best way to prevent a draggable div from moving past the edge of the viewport?

My situation involves a draggable div that functions as a popup window when a specific button is clicked. However, I noticed that dragging the div to the end of the viewport allows me to drag it out of the visible area, causing the body of the page to expa ...

javascripthtml

I am having trouble getting my HTML to properly link with my CSS while using Chrome OS

My website code is not linking with the CSS file <!DOCTYPE html> <html> <head> <link href="main.css" rel="slylesheet" text="text/css"> <title></title> </head> <body> < ...

htmlcssgoogle-chrome-os

Achieving 100% height in a div container using flex while maintaining vertical centering

Struggling to center text and buttons using flexbox while keeping the columns equal? Setting column height as 100% can be a challenge. If you set the height to 100%, vertical alignment may no longer be centered. Avoid resorting to tables or JavaScript for ...

htmlcssflexbox

Using Bootstrap 5 and Masonry to arrange one large image and four smaller ones in perfect alignment

As a newcomer to Bootstrap, I'm looking to create a masonry design with one large picture alongside four smaller ones in Desktop view. For mobile devices, the pictures should all be the same size and align vertically underneath each other. Here' ...

bootstrap-5masonry

A specialized WordPress template that loads just the header and footer

I have encountered a strange issue while trying to create a custom template for WordPress. The index.php file is working perfectly fine - all elements load without any issues. Here is the code in index.php: <?php get_header(); ?> <?php if ( is_ ...

phpcsswordpressheaderfooter

The web element cannot be located, but it becomes visible when manually inspected

https://i.sstatic.net/wQxLk.png I'm facing an issue with accessing this menu in selenium as the web element doesn't show up in the inspector until I do it manually. <a id="cke_3275" class="cke_menubutton cke_menubutton__table c ...

pythonhtmlcssseleniumautomation

Do you want to reset the validation for the paper input?

I am encountering an issue with a paper-input element in my code. Here is what it looks like: <paper-input id="inputForValidation" required label="this input is manually validated" pattern="[a-zA-Z]*" error-message="letters only!"></paper-input&g ...

javascripthtmlpolymerpolymer-1.0web-component