Creating a mobile-friendly layout with 3 columns: Tips and tricks

I attempted to solve the issue independently but didn't have much success. My goal is to create a proper version for mobile users using bootstrap, however, it currently looks terrible on mobile devices. I suspect the problem lies with the div classes that I tried to modify, but unfortunately, it didn't yield the desired results.

Below is my code:

    <div class="container">
    <div class="row">
        <div class="col-xs-4 content">
            <ul class="featuresBody">
                <li><i class="icofont icofont-simple-right"></i>Unlimited Domains & Subdomains</li>
                <li><i class="icofont icofont-simple-right"></i>Ulimited Email Addresses</li>
                <li><i class="icofont icofont-simple-right"></i>Unlimited Databases (MySQL)</li>
                <li><i class="icofont icofont-simple-right"></i>Unlimited Bandwidth</li>
                <li><i class="icofont icofont-simple-right"></i>SSH, sFTP/FTP acess</li>
            </ul>
        </div>
        <div class="col-xs-4 content">
            <ul class="featuresBody">
                <li><i class="icofont icofont-simple-right"></i>PHP 5/7, Perl 5, Python, Zend, phpMyAdmin</li>
                <li><i class="icofont icofont-simple-right"></i>One Click CMS Install</li>
                <li><i class="icofont icofont-simple-right"></i>Cron Job Manager</li>
                <li><i class="icofont icofont-simple-right"></i>SSL Certificate</li>
                <li><i class="icofont icofont-simple-right"></i>POP3, IMAP, SMTP For E-Mail</li>
            </ul>
        </div>
        <div class="col-xs-4 content">
            <ul class="featuresBody">
                <li><i class="icofont icofont-simple-right"></i>Daily Backups</li>
                <li><i class="icofont icofont-simple-right"></i>Detailed Logs & Statistics</li>
                <li><i class="icofont icofont-simple-right"></i>Protection From Viruses</li>
                <li><i class="icofont icofont-simple-right"></i>Advanced DDoS Protection</li>
                <li><i class="icofont icofont-simple-right"></i>24/7 Support</li>
            </ul>
        </div>
    </div>
</div>

Thank you!
P.S Any tips for easily testing pages on mobile devices?

htmltwitter-bootstrapcssmobile

Answer №1

Utilizing Bootstrap, the col-xs class indicates that the column and its contents will adjust to fit on a mobile phone screen. With 3 columns displayed side by side on a larger monitor, each column is easily readable. If this aligns with your scenario (which I believe it does), consider switching from col-xs to col-md or even col-lg. This change will stack the columns vertically on smaller screens instead of compressing them horizontally. The left-most column will appear first, followed by the middle column upon scrolling down, and finally, the right column further below.

Answer №2

Here is a suggestion for you:

<div class="col-sm-12 col-md-4 content">

When it comes to vertical mobile devices, columns may not be the best choice. It is recommended to use rows instead.

Answer №3

Utilizing Bootstrap's smallest column size, known as extra small (xs), will always generate columns regardless of how narrow the viewport is. Consider using sm, md, lg instead, such as col-sm-4.

Refer to Bootstrap Grid Options.

For greater flexibility, you can assign multiple column classes to a single element. For instance, having 50% width columns on smaller mobile devices and 33.333% width columns on larger screens with 

<div class="col-xs-6 col-md-4">
.

Answer №4

I have a couple of suggestions to enhance your website's mobile responsiveness. Firstly, consider replacing col-xs-4 with col-sm-4 to prevent overcrowding on smaller screens. Additionally, for the little green arrow icon, I recommend setting its position to absolute. This will ensure that it remains in place even when word wrapping occurs.

.featuresBody > li i.icofont-simple-right {
  left: 10px;
  position: absolute;
  top: 10px;
}
.featuresBody > li {
  position: relative;
}

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

What is the best way to identify key presses using Javascript?

Exploring various resources online, I have come across multiple recommendations (such as using window.onkeypress or jQuery) but each option comes with its own set of criticisms. How can the detection of a keypress be achieved in Javascript? ...

javascripthtmlkeyboardonkeypress

Is there a way for me to scroll and bring the block up to the header when the button is clicked?

My goal is to create a functionality where clicking on the button with the class .booking__button will smoothly scroll the block up under the header. The position of the block should remain consistent, only the scrolling effect should be visible to the use ...

javascripthtmlcss

What are some effective replacements for SoundManager2 worth considering?

While Soundmanager2 is a useful app, many find the code to be overly complex and difficult to navigate. It almost seems as if it was purposely written in a way to confuse rather than clarify. Are there any recommended alternatives to Soundmanager2 that are ...

javascriptflashhtmlaudiosoundmanager2

"Bootstrap4 - Troubleshooting the Issue of Multiple Carousels Not Function

I attempted to incorporate 2 Bootstrap 4 carousels onto a single page, but encountered issues with the functionality. I utilized this code on my page, however, the last element in the carousel does not cycle correctly. There is a delay of 3 transactions be ...

htmlcsstwitter-bootstrapbootstrap-4

Transforming JQuery code into pure Javascript: Attaching an event listener to dynamically generated elements

After exhausting all available resources on stack overflow, I am still unable to find a solution to my problem. I am currently trying to convert the JQuery function below into Vanilla JavaScript as part of my mission to make web pages free of JQuery. How ...

javascriptjqueryhtml

Tips for sending an email without using MAILTO in JavaScript or jQuery

Today is a great day for many, but unfortunately not for me. I've been struggling with this issue for over two weeks now and can't seem to find a solution anywhere on the internet. Stack Overflow always comes to my rescue when things get really t ...

javascriptjqueryhtmlemail

Preventing data loss upon submitting a form (PHP)

Currently, I have an HTML file that allows users to select appointment times for specific days of the week. Once they click submit, a PHP file generates and displays a calendar with the chosen times as checkboxes. My goal is to enable users to input their ...

phphtmlformspostinput

Error Styling: Using CSS to Highlight Invalid Checkboxes within a Group

Is there a way to create a bordered red box around checkboxes that are required but not selected? Here is the code I currently have: <div class="fb-checkbox-group form-group field-checkbox-group-1500575975893"> <label for="checkbox-group-15005 ...

csstypescriptbootstrap-4

Issue with the flexbox div not fully occupying the vertical space

I can't seem to get flexbox to fill the spaces as I want it to. I've been trying to figure out what I'm missing, but I just can't wrap my head around it. Here's a recreation of the issue with a link to a codepen. I want the div in ...

htmlcssflexbox

Modify the background color of the entire page when the main div is clicked

I am attempting to alter the background color of my entire page when the div with id main is clicked. You can view the code here: $(document).ready(function() { var color = 1; $('#main').click(function(){ if (colo ...

javascriptjqueryhtmlcss

Trying to arrange HTML elements in a diagonal configuration while ensuring they are all uniform in size

My goal is to create an attractive splash page with diagonal, circular links that are all the same size. The <p>'s will function as the links, but I'm struggling to figure out how to make them all diagonal and uniform in size. I've ex ...

htmlcssflexbox

You can see the JavaScript code directly in the browser

I'm completely puzzled as to why this is happening. How strange that the JavaScript code is visible on the browser, almost appearing like regular text on the web page. This mysterious occurrence seems to be exclusive to Firefox. Despite scouring vario ...

javascripthtmlbehavior

Why isn't a single click enough to activate an anchor generated with the Sidr jQuery library in Rails?

I am utilizing a library named Sidr to generate sidebars. I have included all the necessary jQuery and CSS, and while it is operational, I find that I need to double click instead of just one click to open the sidebar. Here is the code snippet. I essentia ...

jquerycssruby-on-railsturbolinkssidr

Managing mouse click events in jQuery

Here on SO, I successfully implemented the mouse down handler. Now, my goal is to separate these functions into their own file named test.js. Within test.js, the code looks like this: function handleMouseDown(e) { console.log('handleMouseDown&ap ...

javascriptjqueryhtml

Why does my text keep drifting towards the left edge?

After spending a day learning CSS and HTML, I decided to recreate a website from a YouTube video and add my own customizations. I was able to center the text in my introduction successfully. However, upon reviewing my progress (see screenshot here), it is ...

htmlcss

PHP is failing to redirect the user to the correct index.php file

I encountered an issue in Jquery Mobile that has left me puzzled. Upon entering the site, users are prompted to either register or login. When selecting register, they are redirected to a page where they input their information. Once completed, the data is ...

phphtmlajaxjquery-mobile

Wrapping a table within an article element

My coding structure appears as follows: <article> <header> <hgroup> <h1>Foo </h1> <h2>Bar</h2> <h3>1337</h3> </hgroup> </header> <table> ...

htmlcss

The Bootstrap navbar collapses and vanishes instantly

Whenever I tap on the navbar icon on my mobile or tablet, the navbar opens briefly before disappearing. Even though the navbar closes visually, it still indicates that it is open. When I tap the navbar icon again to close it (without seeing it actually clo ...

htmltwitter-bootstrapcss

The HTML5 Canvas ellipse with a thick line width is displaying a quirky blank space

I am currently working on a drawing application using HTML5 canvas. Users have the ability to draw ellipses and choose both line and fill colors, including transparent options. Everything works smoothly when non-transparent colors are selected. However, ...

javascripthtmlhtml5-canvas

Sequentially loading Bootstrap columns as the page loads

Is there a way to load columns one by one with a time gap when the page is loaded? Here's the code snippet that can achieve this: setTimeout(function() { $("#box1").removeClass("noDisplay"); },1000); setTimeout(function() { ...

javascriptjqueryhtmlcsstwitter-bootstrap