The query
I recently completed a website for a local sports community using bootstrap v4. While most of the website is finished, I am currently focusing on adjusting the media breakpoints to ensure responsiveness. However, I have encountered a few issues:
1st Determining the appropriate breakpoints
I am currently utilizing the following breakpoints:
/* Smartphones */
@media only screen and (max-width: 991px) {
/* Large devices */
@media only screen and (min-width: 992px) {
}
/* Extra large devices */
@media only screen and (min-width: 1200px) {}
I would appreciate feedback on their suitability.
2nd Centering an element
In addition to the main page, my website includes sub-pages. I aim to position the
<div class="text-container">nav and footer, ensuring that the entire site spans the full screen without scroll bars (work in progress for mobile view on sub-page).
Specific sub-page requiring adjustment:
3rd Enhancing Bootstrap carousel for responsiveness
The carousel on this page features three images. However, on smaller screens, the carousel's images do not fill the entire viewing area.
My attempted solutions:
Regarding the 2nd issue:
top: 50%;
-ms-transform: translate(-50%);
transform: translate(-50%);
margin-top: X%;
margin-bottom: X%;
Concerning the 3rd aspect:
height: 100%;
height: 100vh;
Code Reference
You can access the code at the provided URLs. The primary CSS file is style.css, while sub.css caters to sub-pages, and columns.css defines the .col-x classes.