Grid functionality in Bootstrap not responsive on mobile devices

I have created a grid structure for my website using bootstrap 3. It looks great on desktop, but when I resize the window it does not switch to mobile or tablet view. What am I doing wrong? On desktop, I want each panel to take up 1/6 of the row, and on mobile, 1/3.

<div class="row" id="features">
  <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
    <div class="panel odd">
      <img src="images/treatment.png" alt="Treatments">
      <span>Treatments</span>
    </div>
  </div> <!--panel-->
  <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
    <div class="panel odd">
      <img src="images/treatment.png" alt="Treatments">
      <span>Treatments</span>
    </div>
  </div> <!--panel-->
  <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
    <div class="panel odd">
      <img src="images/treatment.png" alt="Treatments">
      <span>Treatments</span>
    </div>
  </div> <!--panel-->

  <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
    <div class="panel odd">
      <img src="images/treatment.png" alt="Treatments">
      <span>Treatments</span>
    </div>
  </div> <!--panel-->

  <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
    <div class="panel odd">
      <img src="images/treatment.png" alt="Treatments">
      <span>Treatments</span>
    </div>
  </div> <!--panel-->
</div><!--row-->
javascripthtmlcsstwitter-bootstrapresponsive-design

Answer №1

Make sure to verify if meta tags are present in the head section of your HTML document

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

Answer №2

What are you aiming for?

When writing your code, make sure to structure it in a way that mimics your desktop layout.

To do this, adjust the div classes within your inner container like so:

<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">

The numbers following the classes represent the width within the grid. The prefixes col-lg, col-md, col-sm, col-xs correspond to different screen sizes (desktop, tablet, mobile). For more detailed information, refer to Bootstrap's grid section: http://getbootstrap.com/css/#grid

Answer №3

I couldn't locate a container in your code, so my assumption is that you didn't include one. The grid system may encounter issues if the hierarchy of container => row => col-??-## => content is not followed correctly. Additionally, if the odd class for the panel pertains to CSS styling, have you considered using pseudo-classes for a more streamlined approach? You could also explore utilizing LESS for defining the col properties.

If you wish to experiment with the layout on mobile or tablet devices, I recommend using Google Chrome Inspector for a more accurate representation instead of solely relying on resizing the window.

The current code will ensure a consistent look across all devices. To adjust the spacing occupied by the elements, you can switch from col-??-2 to col-??-4 for more space, or to col-??-1 for less space.

<div class="container"> <!-- Consider using container-fluid based on your requirements -->   
    <div class="row" id="features">
         <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
             <div class="panel odd">
                 <img src="images/treatment.png" alt="Treatments">
                 <span>Treatments</span>
             </div>
         </div> <!--panel-->
         <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
             <div class="panel odd">
                 <img src="images/treatment.png" alt="Treatments">
                 <span>Treatments</span>
             </div>
         </div> <!--panel-->
             <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                 <div class="panel odd">
                     <img src="images/treatment.png" alt="Treatments">
                     <span>Treatments</span>
             </div>
         </div> <!--panel-->

         <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
             <div class="panel odd">
                 <img src="images/treatment.png" alt="Treatments">
                 <span>Treatments</span>
             </div>
         </div> <!--panel-->

         <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
             <div class="panel odd">
                 <img src="images/treatment.png" alt="Treatments">
                 <span>Treatments</span>
            </div>
         </div> <!--panel-->
    </div><!--row-->
</div>

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

"Beginner's guide to utilizing JQuery and AJAX with PHP

I am struggling to grasp the concept of using AJAX and jQuery to post data without reloading the page. Specifically, I am facing issues with the form reloading the page and not updating variables. Here is the code I have been working on: Initially, I was ...

phpjavascriptjqueryajaxpost

What are the steps for establishing a connection to Heroku using node-mongodb-native?

I'm feeling lost when it comes to connecting to MongoLab on Heroku. I came across an example that was supposed to help, but it just left me more confused. You can check it out here. After looking at both the web.js and deep.js files, I noticed they b ...

javascriptnode.jsmongodbheroku

Experiencing challenges during the creation of a NUXT build

Trying to build a Nuxt SSR app, but encountering an error related to the css-loader during the build command execution. The issue seems to be with Invalid options object. ERROR in ./node_modules/vue2-google-maps/dist/components/streetViewPanorama.vue (./no ...

cssvue.jswebpacknuxt.js

What is the best method for inserting space between two divs?

I need to create more space between the last two cards and the image at the bottom, but this spacing should increase as I resize the browser window. Can anyone help me with this? https://i.stack.imgur.com/rq9t2.png https://i.stack.imgur.com/tOikx.png Th ...

htmlcssimageresponsive-design

Having trouble calculating the total sum within a for loop

I have a special function inside a loop that generates an array of objects. My goal is to calculate the total value returned by this function, but unfortunately I am not getting the correct sum. The function itself is working properly, however, I am unable ...

javascriptangularjsfor-loop

What could be the reason for npm start failing to work following npm init?

Starting a new project using NPM : npm init Installed the socket.io-client package. package.json: { "name": "client", "version": "1.0.0", "description": "", "main": "script.js&qu ...

javascriptnode.jsnpmimport

``How can I easily navigate to the top of the page when changing routes in React Router DOM v6?

What is the best way to scroll to the top when a route changes in react router dom v6? In the past, I used a solution from this StackOverflow post to make my page automatically scroll to the top every time a route changed with react-router-dom v5. However ...

javascriptcssreactjsreact-routerreact-router-dom

Encountering an issue where props are receiving a value of undefined within a component that is

After receiving a JSON response from getStaticProps, I double-checked the data by logging it in getStaticProps. The fetch functionality is working smoothly as I am successfully retrieving the expected response from the API. import Layout from '../comp ...

javascriptreactjsnext.js

The current context does not have a reference to TextBox

I am encountering an issue with my simple aspx page. Despite not using Master Content Page, I am seeing the following error: The name 'txtFirstName' does not exist in the current context Here is my Markup: <%@ Page Language="C#" %> &l ...

javascripthtmlasp.net

"Utilize HTML to make inline-block elements appear small in size while giving the illusion of being

I have a group of inline-block elements (4 total), all arranged neatly in a single row. As the window size changes, the elements wrap to the next line accordingly. The page does not display scrollbars at the bottom until the browser width reaches the minim ...

htmlcsslayout

"Encountering a syntax error with _.map and _.zip in JavaScript

When attempting to use underscore.js with the following code: (_.map(_.zip([v,xs]),function(rs){return {a:rs[0],x:rs[1]}})) I encountered a syntax error The syntax error observed is: Token '{' is unexpected, expecting [)] at column 34 of the ...

javascriptangularjsunderscore.js

What is the most concise way to align one table row in the middle and another at the top?

Is there a way to align different rows in a table vertically with minimal code? I have a table with 3 rows, and I want the first two rows to be aligned vertically to the top, while the third row should be vertically aligned to the middle. If I try to def ...

htmlcss

Update Button Colour upon clicking the Button

I have multiple buttons lined up in a row on my webpage. I want the button's color to change when I click on them. Below is a snippet of my code: $( "button.change" ).click(function() { $(this).toggleClass( "selected" ); }); .Button { font-fa ...

javascriptjqueryhtmlcss

JavaScript stylesheet library

What is the top choice for an open-source JavaScript CSS framework to use? ...

javascriptcssframeworks

Stop users from saving the page in Next.js

I'm currently working on a NextJs project that involves building an editor application. I want to ensure that the editor functionality does not work when users attempt to save the page in a different format, similar to how applications like Youtube an ...

javascriptnext.jsserverclient

Creating a new object in an empty array within my profile model (mongodb/mongoose) is simple. Just follow these steps to successfully add a

Presenting my Profile model: const ProfileSchema = new mongoose.Schema({ user: { type: mongoose.Schema.Types.ObjectId, ref: "User", }, company: String, website: String, location: String, status: { type: String, require ...

javascriptnode.jsmongodbexpressmongoose

The error `Error occurred when rendering: Users' data cannot be mapped` indicates a problem with the rendering process

Utilizing useSWR for data retrieval from an endpoint and attempting to display all returned data, I encounter the following error: unCaught (in promise) fetchedUsers.map is not a function uncaught TypeError: fetchedUsers.map is not a function The provided ...

javascriptreactjsreact-hooksmapping

What is the best way to eliminate excess spacing between HTML td and table elements in Outlook?

Here's the HTML email code snippet. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co ...

htmlcssoutlookhtml-tablehtml-email

PHP: Using conditional statements to adjust datetime formatting for CSS styling

My title may not make sense, as I am new to PHP. I'm trying to create a custom member tag for my forum that shows "X Years of Experience" with different colors based on the number of years. For example, red for under 6 months, blue for year one, yell ...

phphtmlcssdatetime

Submitting a form automatically in React Native using Redux

Is there a way to automatically submit a Redux Form in React Native based on certain conditions being met? I attempted to do so below, but it resulted in a warning. The documentation provides an example for remote submitting, but it uses HTML form's ...

javascriptreactjsreact-nativeredux-form