I aim to display a well-optimized mobile view by utilizing Bootstrap CSS

Question

I aim to display a well-optimized mobile view by utilizing Bootstrap CSS

I need my website to be mobile responsive and I want the mobile view to have specific changes. Simply adding cd-xs-12 or even cd-sm-12 is not achieving the desired outcome.

https://i.sstatic.net/0GU2h.jpg

This is the current code I have:

.mobile-select {height:50px;padding-top:15px;padding-left:60px;padding-right:20px}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
                        <div class="row breadcrumb bg-white border-bottom paddl30">
                            <div class="col-md-6">
                                <ul>
                                    <li><a href="">Devices</a></li>
                                    <li> &gt; </li>
                                    <li>Screen Analytics</li>
                                </ul>
                            </div>
                        </div>
                        <div class="row mobile-select border-bottom">
                            <div class="col-md-6">
                                <ul class="device-menu bg-white" id="selMenu">

The solution is to add <br class="visible-xs"> wherever necessary.

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

Simply include clearfixes, my friend. Here is an example:

<div class=clearfix></div>

And in the CSS file, it should appear as follows:

.clearfix {
clear: both;
}

Answer 2

Simply include clearfixes, my friend. Here is an example:

<div class=clearfix></div>

And in the CSS file, it should appear as follows:

.clearfix {
clear: both;
}

Answer 3

Answer №2

Make sure to insert the following lines into your head tag.

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

Don't forget to double-check your div tags and ensure that all elements are correctly placed.

Answer 4

Make sure to insert the following lines into your head tag.

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

Don't forget to double-check your div tags and ensure that all elements are correctly placed.

Answer 5

Answer №3

Here's a tip for you to try out! By adding col-xs-12, the elements' heights should render correctly. Use "*" as your identifier in the code to track any changes.

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
  </head>

    <style >

    .mobile-select {height:50px;padding-top:15px;padding-left:60px;padding-right:20px}
    </style>


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>

    <div class="row breadcrumb bg-white border-bottom paddl30">
      <div class="col-md-6">
        <ul **class="breadcrumb/**>
          <li><a href="">Devices</a></li>
          <li> > </li>
          <li>Screen Analytics</li>
        </ul>
      </div>
    </div>
    <div class="row mobile-select border-bottom">
      <div class="col-md-6 **col-xs-12**">
        <ul class="device-menu bg-white **col-xs-12**">
          <li class="selected **col-xs-12**">
            <a href="javascript:void(0)" id="mobileAppScreens">Mobile</a>
            <span class="sub-menu-menu"> 
                <i class="fa fa-chevron-right" aria-hidden="true"></i>
                <a href="javascript:void(0)" ng-click="" id="iosMobileAppScreens" class="checked"> <i class="fa fa-apple" aria-hidden="true" ></i> ios</a>
                <a href="javascript:void(0)" ng-click="" id="androidMobileAppScreens"><i class="fa fa-android" aria-hidden="true"></i> Android</a>
             </span>
            <span class="grey-pipe">|</span>
          </li>
          <li **class="col-xs-12"**>
            <a href="javascript:void(0)" id="tabletAppScreens">Tablet</a>
            <span class="sub-menu-menu hide"> 
                <i class="fa fa-chevron-right" aria-hidden="true"></i>
                <a href="javascript:void(0)" ng-click="" id="iostabletAppScreens"><i class="fa fa-apple" aria-hidden="true"></i> ios</a>
                <a href="javascript:void(0)" ng-click=""  id="androidtabletAppScreens"> <i class="fa fa-android" aria-hidden="true"></i> Android</a>
             </span>
          </li>
          <li class="hidden">
            <input type="text" id="selMenu" value="iosMobileAppScreens">
            <input type="text" id="sDate">
            <input type="text" id="eDate">
          </li>
        </ul>

      </div>
      <div class="col-md-6 **col-xs-12**">
        <div id="dateRangescreenAnalytics" class="pull-right">
          <i class="glyphicon glyphicon-calendar txt-green fa fa-calendar"></i>
          <span></span><b class="caret"></b>
        </div>
      </div>
    </div>

<!-- end snippet -->




</html>

Answer 6

Here's a tip for you to try out! By adding col-xs-12, the elements' heights should render correctly. Use "*" as your identifier in the code to track any changes.

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
  </head>

    <style >

    .mobile-select {height:50px;padding-top:15px;padding-left:60px;padding-right:20px}
    </style>


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>

    <div class="row breadcrumb bg-white border-bottom paddl30">
      <div class="col-md-6">
        <ul **class="breadcrumb/**>
          <li><a href="">Devices</a></li>
          <li> > </li>
          <li>Screen Analytics</li>
        </ul>
      </div>
    </div>
    <div class="row mobile-select border-bottom">
      <div class="col-md-6 **col-xs-12**">
        <ul class="device-menu bg-white **col-xs-12**">
          <li class="selected **col-xs-12**">
            <a href="javascript:void(0)" id="mobileAppScreens">Mobile</a>
            <span class="sub-menu-menu"> 
                <i class="fa fa-chevron-right" aria-hidden="true"></i>
                <a href="javascript:void(0)" ng-click="" id="iosMobileAppScreens" class="checked"> <i class="fa fa-apple" aria-hidden="true" ></i> ios</a>
                <a href="javascript:void(0)" ng-click="" id="androidMobileAppScreens"><i class="fa fa-android" aria-hidden="true"></i> Android</a>
             </span>
            <span class="grey-pipe">|</span>
          </li>
          <li **class="col-xs-12"**>
            <a href="javascript:void(0)" id="tabletAppScreens">Tablet</a>
            <span class="sub-menu-menu hide"> 
                <i class="fa fa-chevron-right" aria-hidden="true"></i>
                <a href="javascript:void(0)" ng-click="" id="iostabletAppScreens"><i class="fa fa-apple" aria-hidden="true"></i> ios</a>
                <a href="javascript:void(0)" ng-click=""  id="androidtabletAppScreens"> <i class="fa fa-android" aria-hidden="true"></i> Android</a>
             </span>
          </li>
          <li class="hidden">
            <input type="text" id="selMenu" value="iosMobileAppScreens">
            <input type="text" id="sDate">
            <input type="text" id="eDate">
          </li>
        </ul>

      </div>
      <div class="col-md-6 **col-xs-12**">
        <div id="dateRangescreenAnalytics" class="pull-right">
          <i class="glyphicon glyphicon-calendar txt-green fa fa-calendar"></i>
          <span></span><b class="caret"></b>
        </div>
      </div>
    </div>

<!-- end snippet -->




</html>

I aim to display a well-optimized mobile view by utilizing Bootstrap CSS

Answer №1

Answer №2

Answer №3

Similar questions

How can I show a tooltip in vuetify when a button is disabled?

Can you explain the significance of the `?` symbol before an object attribute? And why is my TypeScript file not recognizing it?

The web server is serving an HTML file instead of the expected JSON response

Next.js: Extracting the Value of an HTTP-only Cookie

The mobile functionality of the stylesheet is not functioning properly

Is it possible to nest Twig variables within other Twig variables?

What causes the scrollbar to not extend to the bottom when connected to another scrollbar via a JavaScript equation?

How can I implement Jquery ajax calls in various JavaScript functions?

Struggling to retrieve the accurate input value when the browser's return button is clicked?

When I implement the persist gate in Next.js with Redux, the flex direction automatically adjusts

The .click function in jQuery ceases to function after being utilized once

What is the best way to serve individual static files in Express without revealing the entire "/static" directory?

Exploring the Link Between jQuery and HTML

Is it necessary to create a separate animation class to trigger CSS keyframe animations based on scroll position?

Browserify does not provide access to the require function in the browser environment

Repairing my CSS with jQuery fullpage.js

Serve the mobile version to mobile visitors and the desktop version to all other visitors

Tips for automatically closing the Toggle Navigation feature in Vue JS when a user clicks outside of the navigation container

Guide on using jQuery to incrementally cycle through an array using a button

Interact with SOAP web service using an Angular application