How can I determine the width of a Bootstrap Column on a smartphone?

Currently, I am utilizing Photoshop to design a sequence of Wireframes for a forthcoming eCommerce website.

I have a solid grasp on Bootstrap functioning based on a '12 column' structure, where the width of each column varies depending on the viewing device.

During my exploration of Bootstrap's official website, I stumbled upon an intriguing image:

https://i.stack.imgur.com/YFJXt.png

The Wireframe I'm working on is tailored for a screen width of 360px. To deduce the column width, I divided 360px by 12 and arrived at 30px. However, when considering the Gutter Width of 30px from the provided image, there seems to be no space left for content within the Column.

I seem to be missing something in this calculation. Any help or advice on determining the specific width of each Column on a mobile device would be greatly appreciated.

Answer №1

When it comes to Wireframing, it's important to consider the number of columns you use on small screens. While it may be possible to work with 12 columns on these devices, it is recommended to stick to just one column at full width or two columns at most.

Furthermore, it's worth noting that the smallest screen size is actually 320px wide, not 360px as commonly thought.

After accounting for margins, only about 290px is available for content on these devices.

This means each column should ideally be around 24.2px, including gutters. Utilizing all 12 columns on small screens is not advisable, unless dealing with very small elements like icons.

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

Issues occur with Google visualization when the screen is resized

When I resize the browser, an error code google-visualization-errors-8 appears in my Google chart's CSS. https://i.stack.imgur.com/4LX1C.png What could be causing this error to occur? Note: I am redrawing the graph every time the screen is resized. ...

html css charts google-visualization

The website's scrolling speed is painfully slow

Currently, I am working on enhancing the performance of this site at . If you scroll through the site or navigate using the Up and Down Arrow Keys, you may notice a sluggish and slow Scroll Behaviour. I am utilizing HTML5 and simple img tags with 85% wid ...

performance html css

Utilizing Jquery tabs for consistent height display

Currently, I am utilizing jquery tabs for showcasing various content. This is what my functions look like: $(function() { $( "#tabs" ).tabs(); }); I attempted to ensure all tabs have the same height by using this approach: var heightStyle = ...

javascript jquery html css

Attempting to utilize Flexbox to populate vacant areas

https://i.stack.imgur.com/BhPU0.png Can the yellow square smoothly transition to the empty grey square and beyond in this layout setup? Each flex item represents a component that can utilize either 50% or 100% of the container width, information only know ...

html css flexbox

Creating dynamic charts in Javascript using Firebase

My dad recently asked me to enhance our motor home by integrating an Arduino with Firebase to monitor the water and propane tanks. He's hoping to be able to check tank levels from his phone so he can see when they need refilling. I've successful ...

javascript html firebase

Discover the basics of incorporating libraries using npm

As a beginner in JavaScript, I am looking to incorporate moment.js or another library into my project. However, I am unsure of how to properly set up my project so that I can import from the library. Here is how I have structured my HTML: <!DOCTYPE html ...

javascript html shared-libraries

Tips for customizing the event target appearance in Angular 2?

After following the steps outlined in this particular blog post (section 3, event binding), I successfully added an event listener to my component class. I can confirm that it responds when the mouse enters and exits. <p class="title" (mouseenter)="unf ...

javascript css angular events

Conceal a Tag with CSS

Looking to conceal a label using CSS <p class="half_form "> <label for="property_bathrooms">Bathrooms (*only numbers)</label> <input type="text" id="property_bathrooms" size="40" class= ...

css label

I attempted to apply vertical-align and color properties to the static_nav div, but they didn't have any effect. Could this be due to its placement within the header? What steps should I take to resolve this issue?

<!DOCTYPE HTML> <html lang ="en"> <meta charset = "utf-8" /> <head> <title>Sample Page</title> <link rel="stylesheet" type="text/css" href="Web_Design_01_Stylesheet.css" /> </head> <body> &l ...

html css vertical-alignment

Best practices for making an AJAX call to fetch information from a database

I have a database containing a single table. The table includes columns for Company and Time, among others, with Company and Time being crucial. Users can make appointments by filling out a form. Within the form, there are 2 <select> elements - one ...

javascript c#jquery html ajax

The ng-bind directive is functional when used with a textarea element, but it does not work with

Recently diving into the world of angularjs, I stumbled upon ng-bind and its interesting functionality when used as a directive for textarea: <input type="text" ng-model="review.start"/> <textarea ng-bind="review.start"> </textarea> I ...

javascript html angularjs

Strategies for aligning a link on top of another div with absolute positioning

Looking for some assistance with my HTML and CSS code. Specifically, I need the position of the #header id to be set as absolute: <div class="main"> <a href="www.website.com"> <div id="header" class="other"> </div> #heade ...

html css position css-position absolute

The video is not displaying on my website

I recently added a video to my webpage that is 3:48 minutes long. However, even though I have the navigation bar and sound in place, the video does not seem to be displaying properly. Here is an image of how it appears: https://i.stack.imgur.com/HeN41.png ...

html css video

Sorry, the provided text is already unique as it is an error message

I'm currently using the react-highlight-words package to highlight text inputted into a textbox After checking out the react-highlight-words documentation, I noticed that they are using searchWords as an array. https://www.npmjs.com/package/react-high ...

javascript html reactjs redux material-ui

Having trouble displaying the output on my console using Node.js

Hey there, I'm new to this community and also new to the world of nodejs technology. I have encountered a problem that may seem minor to you but is quite big for me. Here's what's going on: In my code snippet, I want a user to input 3 value ...

javascript html node.js

Utilizing CSS for fixed positioning and media queries

I'm currently facing an issue with media queries and a sidebar div that has a fixed position. The problem arises when the viewport becomes too narrow, causing the main content to shift to the left and end up below the sidebar. I attempted to resolve t ...

css static position media-queries fixed

What is the best way to ensure that the search box automatically adjusts its position and size regardless of the screen resolution?

I'm currently working on a responsive website project and facing an issue with the absolute positioning of the search bar on the main page, which is crucial for me. Below is the code snippet: <div class="span4"> <form class="well form ...

javascript jquery html css

Looking for a unique Full Screen Crosshair Cursor with either HTML5 or JQuery?

We've all seen that iconic military crosshair cursor in movies and animations. One example can be found at the beginning of a YouTube video titled "Dishonorable Disclosures" - https://www.youtube.com/watch?v=X-Xfti7qtT0 Another instance is with the ...

html jquery fullscreen mouse-cursor panning

What is the best way to showcase HTML content in columns with a horizontal scrolling feature?

I am trying to showcase a list of basic HTML elements such as divs, paragraphs, etc. within a fixed height container, arranged in columns with consistent width. I want them to be horizontally scrollable, similar to the layout displayed in this image. Thi ...

css html scroll internet-explorer-11

Unable to transfer all the formatting from the original file for the window.print() function. Localhost is functioning properly, but encountering issues with production

I'm encountering an issue with getting all styles from my Vue app. I have tried the code provided in this answer: https://stackoverflow.com/questions/52343006/how-to-print-a-part-of-a-vue-component-without-losing-the-style While it works fine on loc ...

javascript css vue.js vuejs2 vuetify.js

Newtab Q&A