While working on a website using bootstrap, I've encountered an issue with the spacing between text and the end of sections on large screens, as well as text running off sections on smaller screens. Each section has a set height in the CSS that may be causing this problem.
To help visualize my concern, here is a link to a website where sections are similarly created: https://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp Thank you for any assistance.
To avoid setting a fixed min-height value like 500px, consider using a relative height measurement such as 100vh, which corresponds to the viewport height of the browser window. For more information on these units (vh and vw), you can visit here. This will ensure that sections adjust in height based on the browser's viewport. Refer to the example below for guidance.
Sometimes, a section's height may be less than its content height, resulting in overflow issues. In such cases, you can utilize max-height:fit-content property to dynamically set the height based on the content within the section. This acts as a fallback when minimum height is exceeded, preventing text overflow.
html, body {
height:100%;
width:100%;
}
#section1 {padding-top:50px;min-height:100vh;max-height:fit-content;color: #fff; background-color: #1E88E5;}
#section2 {padding-top:50px;min-height:100vh;max-height:fit-content;color: #fff; background-color: #673ab7;}
#section3 {padding-top:50px;min-height:100vh;max-height:fit-content;color: #fff; background-color: #ff9800;}
#section41 {padding-top:50px;min-height:100vh;max-height:fit-content;color: #fff; background-color: #00bcd4;}
#section42 {padding-top:50px;min-height:100vh;max-height:fit-content;color: #fff; background-color: #009688;}<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#section41">Section 4-1</a></li>
<li><a href="#section42">Section 4-2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div id="section1" class="container-fluid">
<h1>Section 1</h1>
<p>Try scrolling this section and observing the navigation bar behavior! Try scrolling this section and observing the navigation bar behavior!</p>
<p>Try scrolling this section and observing the navigation bar behavior! Try scrolling this section and observing the navigation bar behavior!</p>
</div>
<div id="section2" class="container-fluid">
<h1>Section 2</h1>
<p>Try scrolling this section and observing the navigation bar behavior! Try scrolling this section and observing the navigation bar behavior!</p>
<p>Try scrolling this section and observing the navigation bar behavior! Try scrolling this section and observing the navigation bar behavior!</p>
</div>
<div id="section3" class="container-fluid">
<h1>Section 3</h1>
<p>Try scrolling this section and observing the navigation bar behavior! Try scrolling this section and observing the navigation bar behavior!</p>
<p>Try scrolling this section and observing the navigation bar behavior! Try scrolling this section and observing the navigation bar behavior!</p>
</div>
<div id="section41" class="container-fluid">
<h1>Section 4 Submenu 1</h1>
<p>Try scrolling this section and observing the navigation bar behavior! Try scrolling this section and observing the navigation bar behavior!</p>
<p>Try scrolling this section and observing the navigation bar behavior! Try scrolling this section and observing the navigation bar behavior!</p>
</div>
<div id="section42" class="container-fluid">
<h1>Section 4 Submenu 2</h1>
<p>Try scrolling this section and observing the navigation bar behavior! Try scrolling this section and observing the navigation bar behavior!</p>
<p>Try scrolling this section and observing the navigation bar behavior! Try scrolling this section and observing the navigation bar behavior!</p>
</div>
</body>
</html>It's important to avoid simply copying and pasting code from w3schools as it may be too basic and not suitable for your specific website design and styling needs.
To resolve the issue you're facing, try including the relevant code you're referring to. In general, scrollspy does not require explicit height dimensions. I recommend removing any height specifications in your style sheets. The content within the scrolling area will naturally determine the height needed. If removing the height doesn't solve the problem, feel free to share your code so I can provide a tailored solution.
As a beginner in WordPress development, I am currently exploring the process of creating a theme from scratch without relying on plugins. One specific challenge I am facing is figuring out how to display the first post, fifth post, ninth post in full widt ...
Is it possible to achieve dashed lines similar to the ones highlighted in the images below using only CSS? I have a responsive web page built with Bootstrap, and I need the dashed lines to adjust accordingly when the window width changes. https://i.sstat ...
I'm facing an issue with my canvas game where the onclick buttons are redirecting to another menu. However, when I open the Canvas on a monitor with a different resolution, all the X & Y coordinates change and nothing works as expected. Is there a wa ...
I'm currently faced with an HTML file that's being generated by an outdated system, making it tricky for me to control the code generation process. The structure of the HTML code is as follows: <table cellpadding=10> <tr> ...
As a newcomer to Wordpress theme development, I am struggling to properly style my navigation menu. Below is the raw HTML code I have: <!-- Navigation --> <nav class="navbar navbar-default navbar-custom navbar-fixed-top"> <div cl ...
Currently, I am working on a project that involves one main component and several child components. These components require custom CSS files as well as additional vendor CSS files. A challenge I encountered is that I cannot use the @import "path/to/css/fi ...
I have recently inherited a sizable React project, even though my experience with React is limited. Nonetheless, I am attempting to make improvements in areas where I feel confident. An ongoing issue we are facing is the excessive size of our main CSS fil ...
I currently have three php files in my project setup. The first one is the controller "index.php". The second file is for displaying output named "people.php". Lastly, we have a form for user input labeled as "form.php" The content of form.php is structur ...
Just came across this interesting demo at . Any ideas on how to draw PNG images on a canvas along with other objects? I know it's not a pressing issue, but I'm curious to learn more. ...
I am facing an issue with binding remote data to a pie chart while managing a grid with dropdown sorting options. The grid is working fine, but I am unable to display the hierarchical data on the pie chart as categories. <!DOCTYPE html> <html> ...
If a table is set to have a border at a high level, how can I ensure that classes inheriting from it do not have any borders set? table,td,th { border: 1px solid #0B6121; } How can I make sure that my other table has no borders at all? table.menu { ...
After creating a basic application using the code provided in a forum thread and testing it on the worker sandbox MTurk site, I noticed a peculiar issue. The application runs smoothly when following the code from the forum answer directly. However, when at ...
I am attempting to create a content row consisting of 4 divs: 1 container div 3 divs within the container: 1 image - taking up the full height 2 text - sharing the height, but each on a separate line. It should resemble the following: https://i.sstatic.n ...
I'm intrigued by how to incorporate the Ctrl+K (code sample) feature for code. For example: public static void main(String args[]){ System.out.println.out("welcome"); } Is there a way to nicely format this? Do we need any specific package to ...
I have a beautiful star SVG that I created, and I want to use it instead of styling a span to create floating bubbles in my div. However, I'm facing some challenges in adapting my Javascript loop to incorporate the SVG for creating the bubbles, as opp ...
I am encountering an issue where my View is not updating as expected. When a player makes a move, the triggers work (I did a console log on every update of the current game [1]), but the View does not update regularly. To investigate this problem, I added ...
As a newcomer to this community, I am reaching out for the first time seeking assistance. A friend of mine recently updated his WHMCS to the latest version and encountered a branding line above the footer area. Previously, he could remove it by editing th ...
I've been working on an open-source project where I encountered a bug. Even when there are no images to display, the "Load More" button in the web browser extension still appears. To fix this, I decided to add the class `removeButton` to the button an ...
In my experience, I have found that padding or margin CSS properties only seem to affect the appearance of options within the select menu in Firefox browser. I attempted the same styling in Internet Explorer and Chrome but it did not have any effect. Is ...
When using the CSS pseudo-class nth-child(), I've noticed that it works perfectly in all browsers except for ie8. I'm looking for a solution that doesn't involve using JavaScript or jQuery. Is there a way to make these pseudo-classes work i ...