Sections stacked with Bootstrap cards are located beneath a different section

Objective

The primary aim is to ensure that all sections display correctly on the mobile version of the website.

Challenge

An obstacle I am currently facing is:

Full width (Looking good)

https://i.sstatic.net/EDm3N.jpg

Mobile version (Issue)

There is a significant separation within this section:

https://i.sstatic.net/oeWsM.jpg

The bootstrap cards are overflowing into the next section, which is not intended.

Additionally, when viewing the contact-me form, the bootstrap card appears underneath:

https://i.sstatic.net/lTqMR.png

HTML & CSS

 /* ------------ PROJECTS ------------  */

#projects {
    position: relative;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)) ,url('../img/_DSC0031.jpg');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    height: 100vh;
}
/* Other CSS code follows... */

Inquiry

What specific error have I made in my CSS styling that is causing this misalignment with the bootstrap card? How can I ensure proper separation between sections in future design implementations?

htmlcssbootstrap-4

Answer №1

To address the issue of height restriction on smaller devices, consider adjusting the sizing constraints of the containers.

Currently, you have set a fixed height of 100vh for the containers with IDs #projects and #contact-me.

You can modify this limitation for smaller screens by allowing flexible height (for example, in #projects) or implementing a min-height property (like in #contact-me).

If maintaining the container sizes is necessary, you can enable scrollability within the containers by using overflow: auto (as demonstrated in #projects2).

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 method in VBA to access elements generated by javascript code?

After spending several hours conducting thorough research on Google (including browsing StackOverflow), I've been trying to find a method that would allow me to target HTML elements generated by JavaScript in VBA. For instance, using ie.Document.getE ...

javascripthtmlajaxvba

Creating an uncomplicated selector bar for a basic javascript slideshow

I've spent the last couple of hours teaching myself some basic JavaScript, so please bear with me. Currently, I have a simple code in place for a straightforward slideshow on a website. Here is the JavaScript I'm using (where the 'slide&apo ...

javascriptcss

What is the best way to allow text input in a table cell to exceed the confines of the table when it is clicked on

I am currently working on a table that has three columns: a label, a dropdown selector, and an input field. The challenge I'm facing is that the input field needs to accommodate multiple lines of content, specifically in JSON format. However, I want ...

htmlcsstwitter-bootstrap

Design that is specifically tailored for mobile devices and excludes desktop compatibility

I am faced with the challenge of designing a website that is responsive on mobile devices while not being responsive on desktop computers. To address this issue, I have implemented a series of media queries based on specific breakpoints: 320px, 321-480px, ...

css

Efficient PHP caching solution for optimizing JavaScript and CSS performance

I'm facing a unique challenge that I can't seem to solve through typical Google searches. I'm in the process of consolidating all my javascript and css into separate php files using require_once() to pull in the content. The structure of my ...

phpjavascriptcsscaching

Is there a WebKit equivalent to the MDC (Mozilla Documentation Center)?

Experimenting with the newest HTML5 features is rewarding, yet challenging as standards and browser-specific implementations constantly evolve. While Mozilla provides a valuable resource with their MDN Doc Center documenting Gecko changes, I'm curious ...

htmldocumentationwebkit

What are the steps to create a CSS grid like this?

Any suggestions on how to create a grid template similar to the image shown in this picture? I am looking to achieve this design without rounded borders and without any gaps between the elements. ...

htmlcssgridcss-grid

Maintain position:relative while adding child elements to the div

I am currently working on creating a div that includes a small circle on the right side with an X inside it. Here is my progress so far: https://i.sstatic.net/3r2Nl.png Although the X is not yet placed inside the circle as intended, overall it looks good ...

htmlcss

Error message: The Bootstrap .dropdown() method failed because it encountered an "Uncaught TypeError: undefined is not a function"

I've encountered an issue that seems to be a bit different from what others have experienced. Despite trying various solutions, I still can't seem to fix it. I suspect it might have something to do with how I'm importing my plugins. The erro ...

javascriptjqueryhtmltwitter-bootstrap

Animating a gradient within an SVG element following along an SVG path

I successfully created an SVG egg and animated a path while adding a gradient, but I am facing an issue. The linear gradient goes from top to bottom, but I want the dark color at 0% and the light color at 100%. Essentially, I want the gradient to follow th ...

javascriptcsssvg

What is the best way to implement a hover effect on multiple rows within an HTML table using Angular?

I am currently working on developing a table preview feature to display events. I previously sought assistance here regarding positioning elements within the table and successfully resolved that issue. Applying the same principles, I am now attempting to c ...

htmlcssangulartypescript

What is the method for adding two elements to an array?

Currently, I am using JavaScript to push elements into an array. As a result, the output looks like this: ["api", "management", "provision", "tenant", "external", "provider"] => Correct Now, after pushing data into the array, I want to append two el ...

javascriptjqueryhtmlarraysangularjs

Is there a way to enlarge an iFrame to fill the entire screen with just a button click, without using JavaScript

I am currently attempting to achieve full screen mode for an iFrame upon clicking a button, similar to the functionality on this site. On that website, there is a bar that expands to full screen along with the embedded game, which is what I am aiming for. ...

javascripthtmliframefullscreen

Stopping the page from scrolling back to the top when an asynchronous update occurs in Angular

Once the asynchronous request is complete, I dynamically add a new element to the top with this code snippet: Array.prototype.unshift.apply(scope.conversation, conversation.data.message); The issue arises when the added element causes the scroll position ...

javascriptjqueryhtmlangularjs

Generate a unique splatter design using Cascading Style Sheets

Imagine a circle link that transforms into a playful animation with a pink shape when you move your mouse over it: I'm torn between different ideas on how to achieve this effect. One approach could be to use individual elements for each drop, utilizi ...

javascriptjqueryhtmlcss

Enable and disable modal popup functionality in ng-bootstrap for Angular 5

How do I enable (editable) and disable (not editable) an ng-bootstrap modal popup? I have the following HTML code to display a modal popup when a button is clicked. However, I want it to be inactive until a certain condition is met. I am unsure of how to ...

angularhtmlng-bootstrap

What causes the variation in results when I input CSS directly into the head section versus linking it from a separate .css file?

As a beginner, I am facing an issue with my CSS. When I directly insert the CSS into the head of my .html file, everything looks perfect. However, when I link my .css file into the head, the very first word ("Holy") does not display properly. I have double ...

htmlcss

How can a div tag and its class be nested using CSS in Angular?

Can someone help me with nesting a div tag with the "error" class in CSS? <div [class]="{error: condition}">{{ message }}</div> I want to know how to have the .error selector inside the div selector in the CSS file. Note: The error ...

cssangular

Adsense ad unit is not responsive and fails to display properly at dimensions of 320x50 px

I have a unique banner ad that I want to display as the footer on my responsive website. Using media queries recommended in the advertising documentation, I am adjusting the size based on different screen widths. Check out the CSS code below: <style&g ...

htmlcssadsense

Preventing Text Chaos in CSS Layouts: Tips and Tricks

I'm facing an issue with the alignment on this page: . When the page is resized, some of the text links are too long and causing a problem with the layout of the stacked images. How can I fix this? Here is the HTML & CSS code for reference: CSS: #b ...

htmlcss