Struggling to achieve a responsive design for a website on smaller devices with Twitter Bootstrap

Question

Struggling to achieve a responsive design for a website on smaller devices with Twitter Bootstrap

I'm currently working on a school project and I'm fairly new to Bootstrap. I've been encountering some challenges with scaling the website for different resolutions. Whenever I switch to mobile view, the images overlap the text. I would greatly appreciate any assistance in resolving this issue.

<body>
  
<div class="container">
    
<nav class="navbar-fixed-top sticky-top navbar" style="width: 100%; background-color: white; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);"> 
    
    <div class="navbar-header">
    
        <a class="navbar-brand"><img src="transferir.png" alt="" style="height: 65; width: 60px"></a>
        
    </div> 
    
    <div>
        <ul id="menu">
            <li><a href="#home">Home</a></li>
            <li><a href="#sobre">About</a></li>
            <li><a href="#features">Features</a></li>
            <li><a href="#contact">Contact Us</a></li>
        </ul>    
    </div>
        
</nav>


    
<div class="site-index">
    
    <div id="home" class="block home-block">
        <div class="container">
            <div class="col-sm-6  left-block">
                <div class="text-centered">
                    <h1>Texter</h1>
                    <p class="info-text">Send text messages, voice messages, video messages or video call with all your friends and family easily, quickly and securely.</p>
                    
                    <p class="Medium-text">Download Coming Soon</p>
                    <a href="https://play.google.com/?hl=pt-PT" target="_blank"><img src="playstore.png" alt="Playstore" class="d-img"></a>
                    <a href="https://www.apple.com/pt/ios/app-store/" target="_blank"><img src="appstore.png" alt="Apple App Store" class="d-img"></a>
                </div>
            </div>
            <div class="col-sm-5  right-block">
                <img src="phones.png" style="height: 350px; float: right; vertical-align: middle; width: auto !important; position: relative">            
            </div>   
        </div>
        <hr class="sombra">
    </div>
</div>

Css

html{
   scroll-behavior: smooth;
}

body{
    padding-top: 1%;
    font-family: 'Lato', sans-serif;
}

.block{
    padding: 35px;
}

.home-block{
    min-height: calc(100vh - 90px);
}

#home .container{
    height: 500px;  
}

.left-block{
    text-align: center;
    top: 30%;     
}

.right-block{
    bottom: 35%;
    margin-left: 25%;
}

.container{
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

Desktop View

Mobile View Issue

javascript html css bootstrap-4

Answer 1

Answer №1

To start, it seems like you may have overlooked adding the

<div class="row"></div>

wrapper inside your

<div class="container">...</div>

element, as stated here.

Additionally, I highly advise against excessive use of CSS properties such as position: relative/absolute,

top: ...; left: ...; right: ...; bottom: ...

, as they can disrupt the native document flow of CSS and should be employed only when necessary.

If time permits, I recommend delving into this series of articles on CSS layout: CSS layout

I disabled most properties of that nature, resulting in a noticeable improvement:

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

This response would simply be general advice without some coding assistance, so here are some fixes provided below.

Begin by deactivating these properties using DevTools:

.home-block{
    /* min-height: calc(100vh - 90px); */
}

#home .container{
    /* height: 500px; */
}

.left-block{
    /* text-align: center; */
    /* top: 30%; */
}

.right-block{
    /* bottom: 35%; */
    /* margin-left: 25%; */
}

Correcting Bootstrap markup:

<div id="home" class="block home-block">
    <div class="container">
        <!-- Added this wrapper, changed .col-* classes to responsive -->
        <div class="row">
            <!-- Removed .left-block class -->
            <div class="col-sm-12 col-lg-6  left-block">
                <div class="text-centered">
                    <h1>Texter</h1>
                    <p class="info-text">Send text messages, voice messages, video messages or video call with all your friends and family easily, quickly and securely.</p>
                    <p class="Medium-text">Download Em Breve</p>
                    <a href="https://play.google.com/?hl=pt-PT" target="_blank"><img src="playstore.png" alt="Playstore" style="height: 40px;"></a>
                    <a href="https://www.apple.com/pt/ios/app-store/" target="_blank"><img src="appstore.png" alt="Apple App Store" style="height: 40px"></a>
                </div>
            </div>
            <!-- Removed .right-block class, added .text-centered class -->
            <div class="col-sm-12 col-lg-6 text-centered">
                <!-- Removed inline styles (bad practice), changed "height" to be an attribute -->
                <img src="phones.png" height="350">            
            </div>
        </div>
    </div>
</div>

After making these adjustments, the image now appears correctly positioned in relation to the button at the top:

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

To address the navigation bar, consider disabling padding-left specifically for the ul#menu element:

#menu {
    padding-left: 0;
}

Although this resolves the issue on sm resolutions, further adjustments may be needed for resolutions below approximately 520px where the navigation menu wraps under the logo. Contemplate possible solutions either mentally or through a tool like before implementing your chosen approach.

Answer 2

To start, it seems like you may have overlooked adding the

<div class="row"></div>

wrapper inside your

<div class="container">...</div>

element, as stated here.

Additionally, I highly advise against excessive use of CSS properties such as position: relative/absolute,

top: ...; left: ...; right: ...; bottom: ...

, as they can disrupt the native document flow of CSS and should be employed only when necessary.

If time permits, I recommend delving into this series of articles on CSS layout: CSS layout

I disabled most properties of that nature, resulting in a noticeable improvement:

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

This response would simply be general advice without some coding assistance, so here are some fixes provided below.

Begin by deactivating these properties using DevTools:

.home-block{
    /* min-height: calc(100vh - 90px); */
}

#home .container{
    /* height: 500px; */
}

.left-block{
    /* text-align: center; */
    /* top: 30%; */
}

.right-block{
    /* bottom: 35%; */
    /* margin-left: 25%; */
}

Correcting Bootstrap markup:

<div id="home" class="block home-block">
    <div class="container">
        <!-- Added this wrapper, changed .col-* classes to responsive -->
        <div class="row">
            <!-- Removed .left-block class -->
            <div class="col-sm-12 col-lg-6  left-block">
                <div class="text-centered">
                    <h1>Texter</h1>
                    <p class="info-text">Send text messages, voice messages, video messages or video call with all your friends and family easily, quickly and securely.</p>
                    <p class="Medium-text">Download Em Breve</p>
                    <a href="https://play.google.com/?hl=pt-PT" target="_blank"><img src="playstore.png" alt="Playstore" style="height: 40px;"></a>
                    <a href="https://www.apple.com/pt/ios/app-store/" target="_blank"><img src="appstore.png" alt="Apple App Store" style="height: 40px"></a>
                </div>
            </div>
            <!-- Removed .right-block class, added .text-centered class -->
            <div class="col-sm-12 col-lg-6 text-centered">
                <!-- Removed inline styles (bad practice), changed "height" to be an attribute -->
                <img src="phones.png" height="350">            
            </div>
        </div>
    </div>
</div>

After making these adjustments, the image now appears correctly positioned in relation to the button at the top:

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

To address the navigation bar, consider disabling padding-left specifically for the ul#menu element:

#menu {
    padding-left: 0;
}

Although this resolves the issue on sm resolutions, further adjustments may be needed for resolutions below approximately 520px where the navigation menu wraps under the logo. Contemplate possible solutions either mentally or through a tool like before implementing your chosen approach.

Answer 3

Answer №2

If you want to make your website responsive, consider using the following code:

<head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>

For more information, take a look at this resource and this one

Answer 4

If you want to make your website responsive, consider using the following code:

<head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>

For more information, take a look at this resource and this one

Struggling to achieve a responsive design for a website on smaller devices with Twitter Bootstrap

Answer №1

Answer №2

Similar questions

What is the best way to apply different styles to alternative children within a dynamically generated list?

Determine browser compatibility by evaluating the DOM Level

Utilizing the output of a callback function to execute res.render in a NodeJS application

Is it possible for an SVG to derive its dimensions from the containing element?

I am having trouble displaying my mysqli table correctly. I could use some help troubleshooting my code as I am unable to locate the error

What could be causing the issue with my query that is preventing it from properly displaying information in

Move your cursor over the image to see a different image appear

AngularJS written plugin in Javascript

Using AJAX to submit a form to a CodeIgniter 3 controller

Tips for submitting a form and retrieving session count without the need to refresh the page after submitting the form

Accessing data returned from JSON in JQuery beyond the code block required

What is preventing me from retrieving the data stored in my JSON?

Chrome displays the page layout differently upon initial loading

Retrieve the property type for the specified object

Facing a selection list issue on a web application built with Flask and Vue.js

Enhancing Plotly Graphs with Custom Node Values

Storing data locally and replacing the current URL with window.location.href

JavaScript table search feature for novices - finding results

"What could be the reason for web3.eth.getAccounts() method returning an empty array when used with console.log

Encountering naming problem with ng-model, attempting to create an array but receiving a hash instead